The parent component passes the value to the child component
1. The component receives the passed value through props. The props value is an array. The array can contain many properties, which are passed by the parent component.
Vue.component('menu-item',{
props:['title'],
template: '<div>{
{ title }}</div>'
})
2. The parent component passes the value to the child component through attributes
<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>
3. The rule of props property name
- Camel case naming, the form of dashes needs to be used in the template
- There is no such restriction in the template of string form
Vue.component('menu-item',{
//在JS中是驼峰式的
props:['menuTitle'],
template: '<div>{
{ menuTitle }}</div>'
})
<!- 在html中是短横线方式 -->
<menu-item menu-title="hello"></menu-item>
4. Props attribute value type
- String
- Number
- Boolean
- Array
- Object
Child component passes value to parent component
1. The child component passes information to the parent component through a custom event
<button v-on:click='$emit("enlarge-text")'>hello world></button>
2. The parent component listens to the events of the child component
<menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item>
3. The child component passes information to the parent component through a custom event
<button v-on:click='$emit("enlarge-text",0.1')hello world></button>
4. The parent component listens to the events of the child component
<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>
Non-parent and child components pass by value
1. Value transfer between individual event center management components
var eventHub = new Vue ()
2. Monitor events and destroy events
eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')
3. Trigger events
eventHub.$emit('add-todo', id)