Vue父子组件传递/子传父

1.子传父的意思就是，，子组件内容传给父组件，，使父组件可以随时使用子组件传来的数据，使用方法为：自定义函数

1、首先我们来做一个仿淘宝侧边栏商品，点击或者鼠标移动到上面出现内容商品案例

2、以上面这个图片为例，我们来讲一下组件传递的子传父

2.1我们将子组件和父组件分开先，挨个讲 先来看看子组件代码

<!-- 子组件 -->
<template id="cpn">
    <div>
        <h1>{{ctitle}}</h1>
        <button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>
    </div>
</template>
<script>
Vue.component("cpn", {
        template: '#cpn',
        //父传子 props   
        props: {
            ctitle: {
                type: String,
                //找不到数据时
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                list: [{
                    id: 'phone',
                    name: '手机'
                }, {
                    id: 'tv',
                    name: '电视'
                }, {
                    id: 'p',
                    name: '家电'
                }, {
                    id: 'computer',
                    name: '电脑'
                }, ]
            }
        },
        //子传父 自定义事件
        methods: {
            // 自定义事件
            goodsclick(item) {
                this.$emit('itemclick', item)
            }
        }
    })
    </script>

讲解：子组件就是写出一个组件（html）包装起来，并且可以随时使用， 也就相当于html一样的，只是打包起来而已（这么理解应该没什么问题）

1.子组件和vue一样有data，methods，这属性
所以在data中写一个数组，然后用v-for的方式遍历生成按钮
和正常写法没什么差别，然后写个函数，绑定点击事件，并且将item，也就是数组传入的对象传入函数，

<button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>

2.然后最重要，最关键的一步来了，就是在你绑定的点击事件函数中，发射一个自定义函数给父组件，就是发送给父组件

methods: {
            // 自定义事件
            goodsclick(item) {
            //itemclick就是自定义函数，并且将item也传过去给父组件
                this.$emit('itemclick', item)
            }
        }

这就是子组件写完，这是子组件的样式，上图所示

2、接下来讲讲父组件怎么接收子组件传来的自定义事件

<!-- 父组件 -->
<div id="app">
    <cpn :ctitle="title" @itemclick="cpnclick"></cpn>
</div>
<script>
//父组件    
    const app = new Vue({
        el: "#app",
        data: {
            title: "title",
        },
        methods: {
            cpnclick(item) {
                console.log("cpnclick", item);
            }
        }
    })
</script>

讲解一下：你写好了子组件就要调用，调用就是你的组件名作为标签即可，，这里是

<cpn :ctitle="title" @itemclick="cpnclick"></cpn>

在父组件中写一个函数然后在里面绑定从子组件传过来的自定义事件，这样就成功绑定子组件，这样就完成子组件传数据到父组件了