子组件传到父组件

子组件传值改变父组件的值

自定义事件

1首先在父组件中定义一条数据

2 this.$emit("父级的自定义事件")

3 父组件中的 子组件接收自定义事件，绑定到父级的事件

4提醒一下，  父组键的数据要写在，父组件里，子组建的数据方法要写在子组件里

5 这是一个下拉框组件

Vue.component("costom-list", {
            methods:{
                selectValueHandle(item){   //子组件中定义事件
                    this.$emit("receive",item);
                }
            },
            props:["list"], //子组件接收数据
            template:`<ul class="list">
                        <li v-for="item in list" @click="selectValueHandle(item)">{{item}}</li>
                        
                    </ul>`
    })

    var vm = new Vue({
        el: "#app",
        data: {
            list1:["杭州","荆州","鲁中"],
            list2:["2017-02-13","2017-76-23","2017-12-14"]
            
        },
        methods: {
            
        },
        computed: {

        },
        directives: {

        },
        components: {
            "costom-select": {
                data() {
                    return {
                        selectShow: false,
                        val:""// 父组件数据
                    }
                },
                methods:{
                    changeValue(value){ //被子组件触发的父组件事件
                        this.val=value; // 值被改变
                        this.selectShow=false; 
                    }
                },
                props: ["btnValue","list"],
                template: 
                        <section class="warp">
                            <div class="searchIpt clearFix">
                                <div class="clearFix">
                                    <input type="text" class="keyWord" 
                                             @click="selectShow=!selectShow"
                                             :value="val"
                                    />
                                    <input type="button" :value="btnValue">
                                    <span></span>
                                </div>
                                <costom-list 
                                    v-show="selectShow"
                                    :list="list"
                                    @receive="changeValue"  //接收 子组件的自定义事件
                                    ></costom-list>
                            </div>`
            }
        }
    })

 

转载于:https://my.oschina.net/u/3908253/blog/1845818