vue父子组件的数据传递示例

1.父组件向子组件传递数据

<p id="box">
  <aaa></aaa>
</p>

<template id="aaa">
  <h1>模板aaa=>{{msg1}}</h1>  //msg1写在这里是可以的，因为这是父组件内部
  //<bbb>{{msg1}}</bbb>     //这种写法是不可以的，这是在子组件内部，要在这里显示父组件的数
                //据，需要用props定义属性
  <bbb :m='msg1'></bbb>
</template>

var vm=new Vue({
  el:"#box",
  data () {
    a:'aaa'
  },
  components:{
    'aaa':{
      data () {
        msg1:'父组件的数据'
      },
      template:'#aaa',
      components:{
        'bbb':{
        // props:['m'],    //这是一种写法，props以数组的形式定义属性
        props：{
          'm':String      //这是第二种写法，对象的形式
        },
          template:'<h3>这是子组件bbb--{{m}}</h3>'
        }
      }
    },
  }
})

从这个例子中可以看出，父组件向子组件传递数据，因为每一个组件都是独立的作用域，所以要把父组件的数据在子组件中显示，要使用props定义属性来绑定父组件里面的数据才可以，如这里父组件的数据是msg1，用props定义一个属性m，来接收数据msg1；在子组件的模板里面用{{m}}的形式显示父组件的数据

无相关信息