The parent passes value to the child

Basic usage

The parent component passes values to the children through properties

<! Father -- -- -- >
<div id='app'>
    <! Write dead property value -->
    <menu-item title="Order from parent component"></menu-item>
    <! Dynamic data binding -->
    <menu-item :title="title"></menu-item>
</div>
Copy the code

The child component accepts the value passed through the props

/ / child
Vue.component('menu-item', {
    props: ['title'].template:'<div>{{title}}</div>'
})
Copy the code

Naming rule for the props property

  • Use the hump form in props and use the dash form in templates.
  • String templates do not have this limitation.
/ / child
Vue.component('menu-item', {
    props: ['menuTitle'].template:'<div>{{menuTitle}}</div>'
})
Copy the code
<! Father -- -- -- >
<div id='app'>
    <! -- can't use menuTitle -->
    <menu-item :menu-title="ptitle"></menu-item>
</div>
Copy the code

The props property value type

  • String String
  • The numerical Number
  • Boolean value Boolean
  • An Array of Array
  • Object the Object

Example:

html:

<div id='app'>
    <menu-item :pstr='pStr' :pnumber='pNumber' :pboo='pBoo' :parr='pArr' :pobj='pObj'></menu-item>
</div>
Copy the code

js:

Vue.component('menu-item', {
    props: ['pstr'.'pnumber'.'pboo'.'parr'.'pobj'].template: ` 
      
 
       

        {{pstr}}
       
 
       

        {{pnumber}}
       
 
       

        {{pboo}}
       
 
       
     
        
  • {{item}}
    •  
       
 
       
 
        

         {{pobj.name}}
        
 
        

         {{pobj.age}}
        
 
       
 
      
 `
})

var vm = new Vue({
    el: '#app'.data: {
        pStr: 'String'.pNumber: 19.pBoo: true.pArr: ['apple'.'orange'].pObj: {
            name: 'ma'.age: 24}}})Copy the code

Note:

Boolean and numeric values must be bound by: to get the corresponding Boolean and numeric types, otherwise they are all strings.

Children pass values to their parents

The props pass data principle: unidirectional data flow

Only parent to child, child components cannot manipulate data in props.

Basic usage

1. A child component triggers an event. When the parent component detects the event, the parent component triggers the operation of the parent component

Child components pass information to parent components via custom events:

<button @click='$emit("enlarge-text")'>Increase the font size of the parent component</button>
Copy the code

The parent component listens for events of the child component:

<menu-item @enlarge-text='handle'></menu-item>
Copy the code

Example:

html:

<div id='app'>
    <div :style='{fontSize: fontSize + "px"}'>{{msg}}</div>
    <menu-item @enlarge-text='handle'></menu-item>
</div>
Copy the code

js:

Vue.component('menu-item', {
    template: '
      

        < button@click ='$emit("enlarge-text")'> enlarge parent component font size  
      
'
})

var vm = new Vue({
    el: '#app'.data: {
        msg: 'father words'.fontSize: 10
    },
    methods: {
        handle: function(){
            // Increase the font size
            this.fontSize += 5; }}})Copy the code

2. Child components transmit values to parent components

Child components pass values to parent components via arguments:

<button @click='$emit("enlarge-text", 5)'>Increase the font size of the parent component</button>
Copy the code

The parent gets the data from the child via $event:

<menu-item @enlarge-text='handle($event)'></menu-item>
Copy the code

Example:

html:

<div id='app'>
    <div :style='{fontSize: fontSize + "px"}'>{{msg}}</div>
    <menu-item @enlarge-text='handle($event)'></menu-item>
</div>
Copy the code

js:

Vue.component('menu-item', {
    template: '
      

        < button@click ='$emit("enlarge-text", 5)'> enlarge parent component font size  
      
'
})

var vm = new Vue({
    el: '#app'.data: {
        msg: 'father words'.fontSize: 10
    },
    methods: {
        handle: function(val){
            console.log(val);
            // Increase the font size
            this.fontSize += val; }}})Copy the code