关于vue.js:Vue中父子组件的值传递与方法传递

一.Vue 中父组件向子组件传值

利用 v -bind 向子组件传值，子组件中利用 props 承受

<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <!-- 留神点: 组件是能够应用本人的数据的 -->
        <p>{{name}}</p>
        <p>{{age}}</p>
        <!-- 这里将父组件的 name 通过 parentname 传递给了子组件 -->
        <son :parentname="name" :abc="age"></son>
    </div>
</template>
<template id="son">
    <div>
        <!-- 这里通过 parentname 应用了父组件传递过去的数据 -->
        <p>{{parentname}}</p>
        <p>{{abc}}</p>
    </div>
</template>
<script>
    // 父组件
    Vue.component("father", {
        template: "#father",
        data: function(){
          return {
              name: "wqd",
              age: 21
          }
        },
        // 子组件
        components: {
            "son": {
                template: "#son",
                // 这里通过 parentname 接管了父组件传递过去的数据
                props: ["parentname", "abc"]
            }
        }
    });
    // 这里就是 MVVM 中的 View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是 MVVM 中的 Model
        data: {},});
</script>

二.Vue 中父组件向子组件传递办法

父组件利用 v -on 传值，子组件 this.$emit 来接管

<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <button @click="say"> 我是按钮 </button>
        <!-- 这里通过 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(){console.log("helloworld")
            }
        },
        // 子组件
        components: {
            "son": {
                template: "#son",
                /*
                留神点: 和传递数据不同, 如果传递的是办法, 那么在子组件中不须要接管，须要在子组件自定义的办法中通 this.$emit("自定义接管的名称") 的办法来触发父组件传递过去的办法
                */
                // props: ["parentsay"]
                methods: {sonFn(){this.$emit("parentsay");
                    }
                }
            }
        }
    });
    // 这里就是 MVVM 中的 View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是 MVVM 中的 Model
        data: {},});
</script>

三.Vue 中子组件向父组件传值

this.$emit 中第一个参数为接管父组件传递的办法，第二个参数即为向父组件传递的值

<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <button @click="say"> 我是按钮 </button>
        <!-- 这里通过 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: {
            //data 用来承受子组件传递的值
            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: {},});
</script>