vue——39-父子组件互传数据

版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83142775

html

<div id="app">
    <com1 :parentmsg="msg" @func="getMsgFromSon"></com1>
    <h1>{{msgFromSon}}</h1>
</div>

<template id="tmp1">
    <div>
        <h1>这是子元素！--- {{parentmsg}}</h1>
        <input type="button" value="向父组件传递消息" @click="sendMsg">
    </div>
</template>

js

    let com1 = {
        template: '#tmp1',
        data() {
            return {
                msg: '子传数据给父！'
            }
        },
        props: ['parentmsg'],
        methods: {
            sendMsg() {
                this.$emit('func', this.msg)
            }
        }
    };

    let vm = new Vue({
        el: '#app',
        data: {
            msg: '父传数据给子！',
            msgFromSon: ''
        },
        methods: {
            getMsgFromSon(data) {
                this.msgFromSon = data;
            }
        },
        components: {
            com1
        }
    });