父传子 子传父

每天复习一遍kkkkkk：vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值_weixin_30412167的博客-CSDN博客

1.父传子（传递格式 v-on:自定义接收名称 = "要传递方法"）

<template id="father">
    <div>
        <son1 :parentnum="num"></son1>
    </div>
</template>

<template id="son">
    <div>
        <p>{{parentnum}}</p>
    </div>
</template>

<script>
    // 爸爸组件
    Vue.component("father", {
        template: "#father",
        data: function(){
            return {
                num: 0
            }
        },
        // 儿子组件
        components: {
            "son": {
                template: "#son",
                props: ["parentnum"]
            }
        }
    });
</script>

2.子传父

<template id="father">
    <div>
        <!--这里通过parentsay将父组件的say方法传递给了子组件-->
        <son @parentsay="say"></son>
    </div>
</template>

<template id="son">
    <div>
        <button @click="sonFn">我是按钮</button>
    </div>
</template>

<script>
    // 父组件
    Vue.component("father", {
        template: "#father",
        methods: {
            say(data){
                console.log(data);
            }
        },
        // 子组件
        components: {
            "son": {
                template: "#son",
                methods: {
                    sonFn(){
                        // 第一个参数: 需要调用的函数名称
                        // 后续的参数: 给调用的函数传递的参数
                        this.$emit("parentsay", "知播渔");
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>