Vue第9天 数据传递（子传父）

子组件如何传递数据给父组件呢？通过自定义事件来传递：

    const cpn={
        template:'#cpn',
        data(){
            return {
                categories:[
                    {id:'aaa',name:'热门推荐'},
                    {id:'bbb',name:'手机数码'},
                    {id:'ccc',name:'家电办公'},
                    {id:'ddd',name:'电脑维修'},

　　子组件的的信息保存在categories中，我们在界面用button把他们展示了出来。

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

　　可以看到每次点击子组件都能通过btnClick函数得知到底是哪个选项被点击了。可是问题是父组件不知道，我们要把这个信息传递给父组件，那么就通过这个btnClick函数来写：

            btnClick(item){
                //目标是传item到父组件
                this.$emit('itemclick',item)
            }

　　这里通过$emit('事件名'，传递内容)来吧内容发送给父组件，同时父组件需要进行接收：

<div id='app'>
    <cpn @itemclick="cpnClick"></cpn>
</div>

　　这里通过@事件名=‘父组件方法’ 来进行接收，父组件方法cpnClick用来写接收的逻辑:

        methods:{
            cpnClick(item){
                console.log("父组件接受信息",item.name)
            }
        }

　　这里就可以打印出从子组件传递过来的item对象了。

　　总结一下子组件传递父组件的逻辑：1.子组件通过定义一个函数来准备发送包含传递信息的item对象。2.在这个函数中通过this.$emit('事件名',item)来发送。3.父组件中使用子组件标签的地方使用@事件名=‘父组件函数名’进行绑定。 4.父组件的函数中可以随意处理对象了。