Vue中父子组件之间传值

1. 通过props向子组件传递数据
2. 通过事件向父组件发送消息

---

父传子案例：

<div id="app">
  <cpn :cmovies="movies"></cpn>
</div>

<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  //父传子：props
  const cpn = {
    template:'#cpn',
    // props:['cmovies']
    props:{
      cmovies:{
        type:Array,
        default(){
          return []
        }  
      },
    }
  }
const app = new Vue({
  el:'#app',
  data(){
    return{
      movies:['雷神','复仇者联盟']
    }
  },
  components:{
    cpn
  }
})
</script>

 子传父案例：

<!-- 父组件模板 -->
<div id="app">
  <!-- 监听子组件发射事件 -->
  <cpn @itemclick="cpnClick"></cpn>

</div>
<!-- 子组件模板 -->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

// 子组件
const cpn = {
  template:'#cpn',
  data(){
    return{
      categories:[
        {id:'1',name:'系统首页'},
        {id:'2',name:'数据管理'},
        {id:'3',name:'地图操作'},
        {id:'4',name:'数据审查'}
      ]
    }
  },
  methods:{
    btnClick(item){
      //子组件发射事件
      this.$emit('itemclick',item)
    }
  }
}
// 父组件
const app = new Vue({
  el:'#app',
  data(){
    return{
      categories:[
        {id:'1',name:'系统首页'},
        {id:'2',name:'数据管理'},
        {id:'3',name:'地图操作'},
        {id:'4',name:'数据审查'}
      ]
    }
  },
  components:{
    cpn
  },
  methods:{
    cpnClick(item){//监听子组件发射事件，自定义处理事件
      console.log('cpnClick',item);
    }
  }
})
</script>