大飞_dafei

导航

vue组件之间传值(02)__子组件传值父组件 emit _fei

vue 子组件传值父组件  emit

 

<div id="app">
    {{message}}
    <children_fei @item_click="parent_function"></children_fei>
</div>
<template id="children_foo"> <!-- 子组件 -->
    <div><button @click="btnClick()" value="点击">点击</button></div>
</template>
<script src="vue.js"></script>
<script>
    const children_fei = {
        template: '#children_foo',
        data() { return { children_message: "我是子组件bar" } },
        methods: {
            btnClick() {
                this.$emit("item_click", this.children_message);
            }
        }
    };
    const app = new Vue({
        el: '#app',
        data() { return { message: 'Hello Vue!', } },
        methods: {
            parent_function(items) { console.log(items); }
        },
        components: { children_fei }
    });
</script>

 

 

 

vue组件之间传值(01)__父组件传值子组件 props

vue组件之间传值(03)__兄弟组件传值,事件总线[ EventBus ]

posted on 2020-05-02 00:48  大飞_dafei  阅读(157)  评论(0编辑  收藏  举报