Vue框架-组件的概念及使用
一、Vue组件
概念：html、css与js的集合体，为该集合体命名，用该名字复用html、css与js组成的集合体 => 复用性
1. 组件分类
1.1 根组件
根组件：new vue()生成的组件。
new Vue({
el: 'section',
data: {},
methods: {},
});
1.2 局部组件
局部组件：组件名 = {}， {}内部采用的是vue的语法。定义后需要在根组件中注册。
let myTag = {
template: `
<div>
<h1>我是局部组件</h1>
</div>
`
};
new Vue({
el: 'section',
data: {},
methods: {},
components: {
myTag,
},
});
1.3 全局组件
全局组件：Vue.component('组件名',{})，{}内部采用的是vue语法。不需要在vue实例中注册。
注意：全局组件必须写在vue实例上方，不然渲染不出来。
Vue.component('my-tag2',{
template: `
<div>
<h1>我是局部组件</h1>
</div>
`
});
new Vue({
el: 'section',
data: {},
methods: {},
});
2. 组件的特点
1、组件都有管理自己HTML页面结构的template实例成员。
- template对应的值才是vue实例真正要用的虚拟Dom。
- 挂载点挂载的标签是真实的标签。
- template只能有一个根标签。
2、根组件是最顶层的父组件，局部与全局组件为子组件，也可以成为其他局部与全局组件的父组件。
3、子组件的数据需要隔离(数据组件化，每一个组件都拥有自己独立的名称空间)。
4、局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件。（局部组件不注册就是一个普通对象）
5、组件中出现的所有变量(模板中、逻辑中)，都由该组件自己提供管理。(子组件若有根组件，则子组件中的变量由根组件提供。)
6、局部全局和根组件都是一个vue实例，一个实例对应一套html、css、js结构，所以实例也是组件。
3. 如何创建组件
1、声明组件
2、注册组件(全局组件不需要注册)
- component
3、渲染组件
let myTag = {
template: `
<div>
<h1>我是局部组件</h1>
</div>
`
};
Vue.component('my-tag2',{
template: `
<div>
<h1>我是局部组件</h1>
</div>
`
});
new Vue({
el: 'section',
data: {
msg:'组件'
},
methods: {},
components: {
myTag,
},
});
注意：
- el挂载的标签会被实例中的template属性对应的模板替换，所以不要在跟组件中设置template属性。
<body>
<div id="app">
{{ msg2 }}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: '组件信息',
msg2: '组件信息2'
},
template: '<p>{{ msg }}</p>',
})
</script>
</html>
总结：
- 根组件，可以不明确template，template默认采用挂载点页面结构；如果设置了template，就会导致挂载点内部的内容无效，因为会被template替换。
4. 组件的数据局部化
局部或全局组件，每个组件可能会被复用多次，但是组件的样式相同，不一定数据也相同，所以每个组件应该有自己独立的变量名称空间来记录本组件的数据。
因此，将组件数据局部化的目的，是让组件之间数据隔离。
做法：
- 将data写成函数，返回本来data对应的字典，这样就可以通过函数产生一个局部作用域来作为组件本身单独的名称空间。
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div>
</body>
<script>
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>数了{{ count }}下</h2>
</div>
`,
data() {
return { // 产生名称空间
count: 0,
}
},
methods: {
fn() {
console.log(this);
this.count++;
}
}
};
new Vue({
el: '#app',
data: {},
components: {
localTag,
}
});
</script>
5. 组件传参·父传子
有时候我们需要将父标签中的一些数据传给子标签进行渲染，但是此时子标签已经使用独立的名称空间了，该怎么做呢？
我们可以将父标签中的数据作为变量值赋给子标签的某个属性，这样就可以通过这个属性来访问属性值了，而刚好这个属性值就是我们需要的父标签的数据。
那么什么属性可以用来接收数据呢？
答案是自定义属性。
1、子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
2、将父组件的变量赋值给子组件的自定义属性，就可以将该子组件的自定义属性当做变量来使用。通过这个自定义属性就可以访问父标签中的data数据了。
<body>
<section>
<my-tag :myprop="msg"></my-tag>
</section>
</body>
<script>
let myTag = {
props:['myprop',],
template: `
<div>
<h1>{{ myprop }}</h1>
</div>
`
};
new Vue({
el: 'section',
data: {
msg:'我是根标签里面的msg'
},
methods: {},
components: {
myTag,
},
});
</script>
6. 组件传参·子传父
若是父标签需要用到子标签内部的data数据该怎么办呢？
可以通过在子标签内部使用this.$emit('自定义事件名', 触发事件回调的参数们)方法手动将标签的自定义事件触发。
此时子标签的自定义事件对应的是父标签的某个方法，this.$emit('自定义事件名', 触发事件回调的参数们)而这里面的参数则会从子标签中弹出，传入父标签方法中由其接收。
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3>
<tag @action="actionFn"></tag>
</div>
</body>
<script>
let tag = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
changeTitle() {
if (this.t1 && this.t2) {
this.$emit('action', this.t1, this.t2);
// 清空t1和t2
this.t1 = '';
this.t2 = '';
}
}
}
};
new Vue({
el: '#app',
data: {
h1: '主标题',
h3: '子标题'
},
components: {
tag2,
},
methods: {
actionFn(a, b) {
console.log('触发了', a, b);
this.h1 = a;
this.h3 = b;
},
}
})
</script>
