【1118 | Day61】Vue组件
目录
一、组件的构成
组件：由 template + css + js 三部分组成(.vue文件)
- 1）组件具有复用性
-
- 复用组件时，数据要隔离
-
- 复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别
组件介绍：
-
- 每一个组件都有自己的template(虚拟DOM)，最后要替换掉真实DOM(渲染)
-
- 挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM，完成实例创建后再替换掉真实DOM(渲染)
-
- 挂载点el，在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位
-
- 所有 new Vue() 产生的组件都称之为根组件 - 项目开发时，整个项目只有一个根组件
-
- template只能解析一个根标签
二、template的使用
用法一-把整个vue所关联的内容替换
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
// template: '<div id="main"><p>{{ msg }}</p><p>{{ msg }}</p></div>'
template: `
<div id="main">
<p>{{ msg }}</p>
<p>{{ msg }}</p>
</div>
`,
})
</script>
最后显示的效果为
message
message
其实他是先出现message
然后由于后面的template会生成一个临时的dom,会把前面el关联的整个标签变成template中的内容
用法二-局部组件
<div id="app">
<!--3）组件渲染-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
// 1）创建组件
let localTag = {
template: '<p>66666</p>'
};
new Vue({
el: '#app',
// 2）注册组件
components: {
// localTag: localTag, 函数名和组件名相同可以直接简写成一个名字
localTag
}
})
</script>
局部组件可以分三步
- 创建组件
- 注册组件
- 网页中渲染
用法三-全局组件
<div id="main">
<global-tag></global-tag>
</div>
<script src="vue.js"></script>
<script>
// 全局组件
// 1）创建组件
// 2）渲染组件
// 3) 使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签
Vue.component('global-tag', {
template: '<p>66666</p>'
});
new Vue({
el: '#main',
});
</script>
使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签
注意点
- template中只能有一个根标签,如果有多个,只生效第一个
- template内容如果要多行显示方便观察的话用反引号`来代替双引号或者单引号
三、组件复用的数据隔离
1.局部组件中
<div id="app">
<!--3）组件渲染-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script src="vue.js"></script>
<script>
// 1）创建组件
let localTag = {
data:function(){
return {
msg:100
}
},
template: '<p>{{msg}}</p>'
};
new Vue({
el: '#app',
// 2）注册组件
data:{
msg:20
},
components: {
// localTag: localTag, 函数名和组件名相同可以直接简写成一个名字
localTag
}
})
</script>
- 把data里面值放function中当然了function可以不用写省略掉
- 而且不会受vue中msg影响,只受组件中的msg影响
2.全局组件中
<div id="main">
<global-tag></global-tag>
</div>
//<global-tag></global-tag> 这样就是个普通的自定义标签
<script src="vue.js"></script>
<script>
// 全局组件
// 1）创建组件
// 2）渲染组件
// 3) 使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签
// 4) 这里的全局不是指整个网页而是指与vue进行挂载那些全部的部分
Vue.component('global-tag', {
data:function(){
return {
msg:100
}
},
template: '<p>{{msg}}</p>'
});
new Vue({
el: '#main',
data:{
msg:10
}
});
</script>
特点和局部相同
四、组件信息交互父传子
<div id="app">
<local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
let localTag = {
props: ['ad_dic'],
template: `
<div class="ad">
<img :src="ad_dic.img" alt="">
<h4>{{ ad_dic.title }}</h4>
</div>
`,
};
// 模拟后台的数据
let ads = [
{
'img': 'img/001.png',
'title': '小猫'
},
{
'img': 'img/002.png',
'title': '黄蛋'
},
{
'img': 'img/003.png',
'title': '蓝蛋'
},
{
'img': 'img/004.png',
'title': '短腿'
},
];
new Vue({
el: '#app',
data: {
ads, // 后期项目是后台返回的数据
},
components: {
localTag
}
})
// 分析数据 父传子
// 1）父组件提供数据
// 2）在父组件模板中，为子组件标签设置自定义属性绑定父级数据
// 3）在子组件props成员中，接收自定义属性
// 4）在子组件模板和方法中，使用自定义属性名就可以访问父级数据
</script>
简单总结
父级模板:<local-tag :属性名="父级的数据" v-for="ad in ads" :key="ad.img">
子级模板: props: ['属性名'],
五、组件信息交互子传父
<div id="app">
<p>
<input type="text" v-model="info">
<button @click="add_msg">留言</button>
<ul>
<msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag>
</ul>
</p>
</div>
<script src="js/vue.js"></script>
<script>
let msgTag = {
props: ['msg', 'index'],
template: `
<li>
<span @click="del_fn" class="del">x</span>
<span>{{ msg }}</span>
</li>
`,
methods: {
del_fn() {
this.$emit('del_action', this.index)
}
}
};
new Vue({
el: '#app',
components: {
msgTag
},
data: {
info: '',
msgs: JSON.parse(sessionStorage.msgs || '[]'),
},
methods: {
add_msg() {
let info = this.info;
if (info) {
this.msgs.unshift(this.info);
this.info = '';
sessionStorage.msgs = JSON.stringify(this.msgs);
}
},
del_li(index) {
console.log(index);
this.msgs.splice(index, 1);
sessionStorage.msgs = JSON.stringify(this.msgs);
}
}
});
// 分析数据 子传父
// 1）子组件提供数据
// 2）子组件通过系统事件激活自己的绑定方法，发送一个自定义事件，携带自身数据
// 3）在父组件模板中的子组件标签中为自定义事件绑定父组件方法
// 4）父组件实现方法获取到子组件数据
</script>
简单总结：
子级模板: <span @系统自带的属性="子级方法" class="del">x
子级实例方法中:this.$emit('自定义事件',子级数据们)
父级模板:<msg-tag @自定义事件="父级的方法" v-for="(msg, i) in msgs" :key="msg">
父级方法: 父级的方法(子级的数据们){处理与子级相关的函数}
