Vue_组件传值_子组件通过事件调用向父组件传值

• 在html模板里,子组件通过事件绑定自定义事件来调用父组件的方法.
• 在子组件模板中,子组件需通过 this.$emit(自定义事件,传递的数据) 来触发自定义事件并向父组件传值.

<div id="app">
        <p>{{msg1}}</p>
        <p>{{msg2}}</p>
        <com1 @func="show"></com1>
    </div>
    <template id="tmp1">
        <div>
            <input type="button" value="点击修改父组件数据" @click="myclick">
        </div>
    </template>

<script>
        var com1 = {
            template: '#tmp1',
            methods: {
                myclick() {
                    this.$emit('func', '这是子组件传给父组件的数据', '这是子组件传递给父组件的第二个数据');
                }
            }
        };
        var vm = new Vue({
            el: "#app",
            data: {
                msg1: '这是父组件的数据msg1',
                msg2: '这是父组件的数据msg2'
            },
            methods: {
                show(params1, params2) {
                    this.msg1 = params1;
                    this.msg2 = params2;
                }
            },
            filters: {},
            directives: {},
            components: {
                com1
            },
            watch: {},
            computed: {}
        });
    </script>