Vue 父子组件之间的传值

#html

<custom-select btn-val="搜索" :list="list1"></custom-select>
<custom-select btn-val="查询" :list="list2"></custom-select>

#script

// 注册组件 - 父组件
Vue.component('custom-select', {
    props: ['btnVal', 'list'],
    data() {
        return {
            childVal: ''
        }
    },
    template: `<div>
<div>
    <input type="text" :value="childVal">
    <button>{{ btnVal }}</button>
</div>
<list v-bind:childList="list" @receive="getVal" />

    methods: {
        getVal(value) {
            console.log(`我是子组件传递过来的数据：${value}`)
            // value?
            this.childVal = value
        }
    }
})

// 注册组件 - 子组件
Vue.component('list', {
    props: ['childList'],
    template: `<ul>
   <li v-for="item in childList" @click="selectVal(item)">{{ item }}</li>
</ul>`,
    methods: {
        selectVal(val) {
            // console.log(val)
            // // 如何给我父组件？
            // console.log(this)
            this.$emit('receive', val) // 第一步：第一个参数：自定义事件名称；第二个参数：就是咱们要传递的数据；
        }
    }
})


// 实例化
new Vue({
    el: '#app',
    data: {
        list1: ['猪八戒','孙猴子', '沙和尚'], // 顶层数据
        list2: ['熊大', '熊二', '强子']
    },
    methods: {

    }
})