在父组件里使用子组件时,父组件的模板最外层一定要有div块
组件的数据存放问题
组件内部是无法访问vm实例里的data数据的,组件有自己的保存数据的位置。
组件也有data、methods、生命周期函数等属性,但data必须是一个函数且返回的是一个对象,对象内部保存着数据。
为什么组件里的data必须是函数形式?
当重复使用组件时,如:
<div>
<cpn><cpn>
<cpn><cpn>
<cpn><cpn>
</div>
这三个cpn相当于三个组件实例,都会调用组件里的data,如果data是对象,那么三个实例传进的是地址,相当于三个实例引用同一个data。
如果data是函数,那么cpn在调用data时,会执行函数返回新的对象,以防止改变一个实例其他跟着改变。
父子组件通信
父传子用props
在子组件中添加props属性,里面存放来自父组件的数据。
props里命名慎用驼峰标识,如cMessage动态绑定时需改为v-bind:c-message=""
<cpn :cmovies="movies" :cmessage="message"></cpn>
Vue.component('cpn',{
template:'#cpnC',
props:['cmovies','cmessage'],
或props:{ //对象类型可添加类型和默认值
cmovies:Array,
cmessage:{
type:String,
default:'你好啊',
required:true //用cpn时必须传入的值
}
}
})
子传父用自定义事件
在子组件的方法中用emit触发在父组件标签里的自定义事件(这个事件是父组件里自定义的事件)
父组件自定义事件响应的函数传参问题很奇怪:
- 可以使用faclick($event,userDefined),这样在定义faclick时的形参就可以列出多个,faclick(a,userDefined){},这个方法只适用于emit只传递一个参数。
- 可以使用faclick(arguments,userDefined),这样定义faclick时的形参就可以是一个数组,faclick(arr,userDefined){},数组里依次对应emit里传入的值。userDefined是自己定义的参数而不是emit里传入的参数。适用于emit传递多个参数。
<div id="app">
<cpn @itemclick="faclick"></cpn> //itemclick即自定义事件
</div>
<template id="cpnC"> //此id避免与注册的标签名相同
<div>
<button v-for="item in movies" @click="btnclick(item)">{{item}}</button> //
</div>
</template>
<script>
子组件{
methods:{
btnclick(item)
this.$emit('itemclick',item) //itemclick是给父组件自定义的事件
}
}
}
父组件{
methods:{
faclick(item){}
}
}
</script>