When using child components in a parent component, the outermost template of the parent component must have a div block
Component data storage problem
The data in the vm instance cannot be accessed inside the component, and the component has its own location to save the data.
Components also have attributes such as data, methods, and life cycle functions, but data must be a function and return an object, and the data is stored inside the object.
Why must the data in the component be in functional form?
When reusing components, such as:
<div>
<cpn><cpn>
<cpn><cpn>
<cpn><cpn>
</div>
These three cpn are equivalent to three component instances, and they will all call the data in the component. If the data is an object, then the address is passed in by the three instances, which is equivalent to three instances referencing the same data.
If data is a function, then when cpn calls data, it will execute the function to return a new object to prevent changing one instance and other subsequent changes.
Parent-child component communication
Props from father to son
Add the props attribute to the child component, which stores the data from the parent component.
Be careful with the camel case in the naming of props. For example, when cMessage is dynamically bound, it needs to be changed to 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时必须传入的值
}
}
})
Custom event for child to parent
Use emit in the method of the child component to trigger a custom event in the parent component label (this event is a custom event in the parent component)
The function parameter passing of the parent component's custom event response is very strange :
- You can use faclick( $event ,userDefined), so that multiple parameters can be listed when defining faclick, faclick(a,userDefined){}, this method is only applicable to emit only one parameter is passed .
- You can use faclick(arguments,userDefined), so that the formal parameter when defining faclick can be an array, faclick(arr,userDefined){}, and the array corresponds to the value passed in in emit. userDefined is a parameter defined by itself rather than the parameter passed in in emit . Applicable to emit multiple parameters .
<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>