VUE父传子、子传父的写法学习案例（包括监听事件）

VUE父传子（props）

<div id="app">

 <cpn v-bind:cmovices="movices" :cmessage="message"></cpn>

  </div>
  <template id="cpn">
 <div>
    <p>{{cmessage}}</p>
    <ul>
        <li v-for="(cmovice,index) in cmovices">{{index}}-----{{cmovice}}</li>
    </ul>
    <h1>{{cmovices}}</h1>
 </div>
  </template>

<script>
const cpn = {
    template:'#cpn',
    // props:['cmovices','cmessage'],
    //父传子的数组的用法、字符串的用法、{}的用法
    props:{
    cmovices:{
        type:Array,
        default:'aaaaaa'
    },
    cmessage:{
        type:String
    }
    },
    data(){
        return {}
    }
}
//语法糖的写法

const app =new Vue({
    el:"#app",
    data:{
        message:'测试添加',
        movices:['你好','测试001','测试001','测试001','测试001']
    },
    components:{
        cpn
    }
})
</script>

子传父(emit)

 <!-- 父组件 -->
  <div id="app">
      <!-- 获取子组件的传递的信息 -->
  <cpn @item-click="cpnClick"></cpn>
  </div>
  <!-- 子组件 -->
  <template id="cpn">
    <div>
        <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
    </div>
  </template>

<script>
    //注册一个子组件
    const cpn = {
        template:'#cpn',
        data(){
            return{
                //种类推荐
                categories:[
                    {id:'aaa',name:'热门推荐'},
                    {id:'bbb',name:'手机数码'},
                    {id:'ccc',name:'家用家电'},
                    {id:'ddd',name:'电脑办公'},
                ]
            }
        },
        methods: {
            btnClick(item){
            //  console.log(item);
             //传递给父组件
             this.$emit('item-click', item)
            }
        }
    }
    //父组件
    const app = new Vue({
        el:'#app',
        data:{
            message:'测试传递数据'
        },
        components:{
            cpn
        },
        methods:{
        //监听子传父组件
            cpnClick(item){
                console.log('12121',item);
            }
        }
    })

</script>