Day 67 Vue组件
Vue组件
组件的概念
可复用的 Vue 实例，且带有一个名字
<div id="app">
<!--{{ msg }}-->
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '组件替换了'
}
template: '<p>{{ }}</p>'
})
</script>
组件的分类
根组件
new Vue()生成的组件就是根组件
可以不明确template,template采用挂载点页面结构;如果设置的template,挂载点内部的内容会无效,因为会被替换
注意:html和body标签不可以被替换掉,因此不能设置为挂载点
全局组件
Vue.component('组件名', {})
{}内部采用的是Vue语法
<div id="app">
<global-tag></global-tag>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('global-tag', {
template: `
<p>{{ msg }}</p>
`,
data() {
return {
msg: '全局组件信息'
}
}
})
new Vue({
el: '#app',
})
</script>
局部组件
组件名 = {}
{}内部采用的是Vue语法
<div id="app">
<local-tag></local-tag>
</div>
<script src="js/vue.js"></script>
let localTag = {
template: `
<p>{{ msg }}</p>
`
}
<script>
new Vue({
el: '#app',
components: {
localTag
}
})
</script>
组件的特点
- 组件都有管理组件html页面结果的 template 实例成员, template中有且只有一个根标签
- 根组件都是作为最顶层的父组件,局部和全局组件作为子组件,也可以作为其他局部或全局组件的父组件
- 子组件的数据需要隔离(数据组件化, 每一个组件都有自己数据的独立的名称空间)
- 局部组件必须注册后才能使用,全局组件不需要注册,建议使用局部组件
- 组件中出现的所有变量(模板中,逻辑中),都由组件自己管理
- 局部全局和根组件都是vue的一个实例,一个实例对应一套html,css和js结构,所以实例就是组件
组件化
局部或者全局组件,一个组件都有可能会被复用多次,每个组件都应该有自己独立的变量名称空间
data() {
return {
}
}
方法执行后会产生一个局部作用域,所以数据可以作为方法的返回值,来实现数据的组件化
组件传参
父传子
-
子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接作为变量)
-
子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,可以将变量值传递给子组件
<div id="app">
<local-tag :msg="msg"></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
let localTag = {
props: ['msg'],
template: `
<p>{{ msg }}</p>
`,
data() {
return {
msg: '局部组件信息'
}
}
};
new Vue({
el: '#app',
data: {
msg: '根组件信息'
},
components: {
localTag
}
})
</script>
页面优先显示的是 根组件信息
props还可以传对象,用来确定数据类型
子传父
- 自定义事件是属于子组件的,子组件在父组件中渲染并绑定父组件的事件方法(事件方法在父组件上实现)
- 子组件如何触发自定义事件: this.$emit('自定义事件', 触发事件回调的参数们)
子组件触发自定义事件,并传入子组件的数据内容,然后在父组件中拿到子组件的消息
<div id="app">
<local-tag @action="actionFn"></local-tag>
<p>{{ p1 }}</p>
</div>
<script src="js/vue.js"></script>
<script>
let localTag = {
template: `
<input type="text" v-model="msg" @input="changeMsg">
`,
data() {
return {
msg: '局部组件信息'
}
},
methods: {
changeMsg() {
this.$emit('action', this.msg)
}
}
};
new Vue({
el: '#app',
data: {
p1: 'NaN'
},
components: {
localTag
},
methods: {
actionFn(a) {
this.p1 = a;
}
}
})
</script>
