Vue中子组件向父组件传值

Vue中子组件向父组件传值

1. 首先创造两个组件，并为父组件引用的子组件创建一个自定义方法。
2. 子组件添加一个事件，可以触发$emit事件。

<!------------------------------- 父组件 ------------------------------->
    <!-- 在父组件中给引用的子组件创建一个自定义事件 -->
    <template id="father">
        <div>
            <son @zidingyi="tofather"></son>
            <div>父组件获取到的值是：{{getmessage}}</div>
        </div>
    </template>
    <!------------------------------- 子组件 -------------------------------->
    <template id="son">
        <div>
            <!-- 子组件触发$emit事件 -->
            <button @click="submit">传递</button>
        </div>
    </template>

3. $emit(‘自定义方法名’，传递的数据)。

 // --------------------------------子组件-----------------------------
        Vue.component('son', {
            template: '#son',
            data() {
                return {
                    msg: 'hello'
                }
            },
            // 子组件的方法中调用点击事件，点击按钮调用$emit方法 
            // 括号中第一个参数是父组件的自定义方法名，第二个参数是传递的数据
            methods: {
                submit() {
                    this.$emit('zidingyi', this.msg);
                }
            },
        })

4. 父元素调用自定义的方法，参数就是传递的值。

 // ----------------------------------父组件----------------------------------
        Vue.component('fathet', {
            template: '#father',
            data() {
                return {
                    getmessage: '',
                }
            },
            methods: {
                // 调用父组件的自定义方法，括号里是参数
                tofather(message) {
                    this.getmessage = message
                }
            }
        })

5. 展示传递的值

 <div id='app'>
        <fathet></fathet>
    </div>