[vue]全局组件和局部组件(嵌套+props引用父组件数据)
[vue]组件篇
[vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick
[vue]实现父子组件数据双向绑定
[vue]render函数渲染组件
[vue]webpack&vue组件工程化实践
组件基础
| 局部组件 | 全局组件 |
|---|---|
| 定义 | 定义 |
| 注册 | - |
| 使用 | 使用 |
全局组件(工程中比局部组件更常用)
组件化编程好处: 1,重用性 2,维护性
- 全局组件定义(体会一下重用性)
<div id="app">
<!--重用性-->
<my-awsome></my-awsome>
<my-awsome></my-awsome>
<my-awsome></my-awsome>
<!--组件中使用数据-->
<my-awsome2></my-awsome2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//全局组件: 1,定义 2,使用
Vue.component(
'my-awsome', {
template: "<h1>全局组件: maomao</h1>"
}
);
Vue.component(
'my-awsome2', {
template: "<h1>自己的模板里取自己的数据: {{msg}}</h1>",
data(){
return {msg:'maomao-msg'}
}
}
);
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
})
</script>
局部组件(不常用)
- 最简单的局部组件(写法)
<div id="app">
{{msg}}
<awsome></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
components: {
awsome: {
template: "<h1>最简单的局部组件</h1>"
}
},
})
</script>
- 局部组件(带数据)
1.子组件不能直接获取父组件的数据
<div id="app">
{{msg}}
<awsome></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
components: {
awsome: {
data: function () { //1,data必须是函数类型
return {count: 0} //2,返回值必须是对象
},
template: "<button @click='count++'>count++: {{count}}</button>"
}
},
})
</script>
- 也可以将对象写在外面(注意: data和template都在对象里)
<div id="app">
{{msg}}
<awsome></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let awsome = {
data: function () {
return {count: 0};
},
template: "<button @click='count++'>count++: {{count}}</button>"
};
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
components: {
awsome: awsome,
},
})
</script>
- 组件之间最好不要共享数据
<div id="app">
<h1>共享数据</h1>
<awsome></awsome>
<awsome></awsome>
<hr>
<h1>独立空间数据</h1>
<awsome2></awsome2>
<awsome2></awsome2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 局部组件使用3步骤: 1,创建 2.注册 3,使用
// 共享数据(数据定义在了componet外部)
let obj = {count: 0};
Vue.component('awsome', {
data: function () {
return obj;
},
template: "<button @click='count++'>awsome: {{count}}</button>"
}
);
//独立数据
Vue.component('awsome2', {
data: function () {
return {count: 0};
},
template: "<button @click='count++'>awsome2: {{count}}</button>"
}
);
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
})
</script>
子组件获取父组件的数据: props
<h1>props: 父组件数据传给子组件</h1>
<div id="app">
<awsome :my-name="name" :my-age="age"></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
name: 'maomao',
age: 22
},
components: {
'awsome': {
template: '<div>name: {{myName}} age:{{myAge}}</div>',
props: ['myName', 'myAge']
}
}
})
</script>
父子组件嵌套
<div id="app">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 如果要在一个组件使用另一个组件，
// 1.先保证使用的组件(父组件)得是真实存在，
// 2.在需要引用这个组件的(子组件)实例上通过components注册这个组件
// 3.组件需要在父级的模板中通过标签的形式引入
let grandson = {
template: '<div>grandson</div>',
};
let son = {
template: '<div>son <grandson></grandson></div>',
components: {grandson}
};
let parent = {
template: '<div>parent <son></son></div>',
components: {son}
};
let vm = new Vue({
el: '#app',
template: '<parent></parent>',
components: {parent}
})
</script>
附:
- 了解一下template(生命周期)
1. 如果有template属性会用模板替换掉外部html，只要有此属性app中的内容就没有任何意义了
2. 只能有一个根元素，不能是文本节点
<div id="app">
{{msg}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
template: "<div>内置组件模板</div>",
})
</script>
props默认是单向绑定
- 子组件的数据更改,不影响父组件
- 父组件的数据更改,会影响子组件
<div id="app">
<h1>父组件数据</h1>
name: {{ name }}
<input type="text" v-model="name"/> <br>
age: {{ age }}
<input type="text" v-model="age"/>
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
<div>
<h1>子组件数据</h1>
myName: {{ myName }}
<input type="text" v-model="myName"/> <br>
myAge: {{ myAge }}
<input type="text" v-model="myAge"/>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'maomao',
age: 22
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
- 双向绑定(2.x版本不好使)
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
- 单次绑定
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>
webpack中使用全局组件和局部组件
vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。
全局组件引入写法：在项目的main.js中：
import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件
Vue.use(MyComponent); // 自定义全局组件的时候需要Vue.use();
Vue.component('my-component', MyComponent); //初始化组件
new Vue({
el: '#app',
router,
components: {
App,
MyComponent
},
template: '<App/>',
});
局部组件引入写法：在需要使用组件的a.vue文件中：
<template>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
components: {MyComponent}, // 直接初始化就可以啦，不需要Vue.use();
data() {},
methods: {}
};
</script>
<style lang="scss" scoped>
</style>
下面附上自定义组件的MyComponent.vue文件代码：
<template>
<div>
<a @click="methods1()"></a>
</div>
</template>
<script>
import { MessageBox } from 'mint-ui';
export default {
data () { // 组件内参数定义在data中
return {
data1: {}
};
},
props: { // 组件传参使用props
value1: String,
value2: Number
},
methods: { // 组件的计算方法
methods1 () {
}
}
};
</script>
<style lang="scss" scoped>
</style>
参考:
https://blog.csdn.net/ywl570717586/article/details/79984909
webpack vue的几种引入方式: http://vue2.mmxiaowu.com/article/584a3957fc007e72b0f576d9