子父之间的通信（this.$emit）

作者: Wo信你个鬼 | 来源:发表于2019-04-11 20:06 被阅读0次

子父之间的通信（this.$emit）
this.$refs与this.$emit()
Vue 父子组件和兄弟组件通信
$emit自定义事件
子组件的值传给父组件
vue组件如何通信
2018.04月面试题
vue 组件之间的传值2018-10-24
vue组建父子通信
vue的$emit

1.在子组件中定义一个事件
2.在事件中通过 $emit方法传递数据 3.在父组件中注册通过$ emit定义事件
4.通过父组件注册事件获取数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <test @toparent="getSon"></test>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            var test = {
                template:`
                <div>
                <ul>
                <li @click="getIndex(index)" v-for="(val,index) in list">{{val}}</li>
                </ul>
                </div>
                `,
                data:function(){
                    return {
                        list:["html","css","js"]
                    }
                },
                methods:{
                    getIndex(index){
                        console.log(index)
                        this.$emit("toparent",[index,this.list])
                    }
                }
            }
            var app = new Vue({
                el:'#app',  
                components:{
                    test
                },
                methods:{
                    getSon(res){
                        console.log({res})
                    }
                }
            })
        </script>
    </body>
</html>