快捷導(dǎo)航

Vue中父子組件的值傳遞與方法傳遞

更新時(shí)間：2020年09月28日 09:27:22 作者：WanGqD

這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一.Vue中父組件向子組件傳值

利用v-bind向子組件傳值，子組件中利用props接受

<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <!--注意點(diǎn): 組件是可以使用自己的數(shù)據(jù)的-->
    <p>{{name}}</p>
    <p>{{age}}</p>
    <!--這里將父組件的name通過parentname傳遞給了子組件-->
    <son :parentname="name" :abc="age"></son>
  </div>
</template>
<template id="son">
  <div>
    <!--這里通過parentname使用了父組件傳遞過來的數(shù)據(jù)-->
    <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接收了父組件傳遞過來的數(shù)據(jù)
        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",
        /*
        注意點(diǎn): 和傳遞數(shù)據(jù)不同, 如果傳遞的是方法, 那么在子組件中不需要接收，需要在子組件自定義的方法中通this.$emit("自定義接收的名稱")的方法來觸發(fā)父組件傳遞過來的方法
        */
        // props: ["parentsay"]
        methods: {
          sonFn(){
            this.$emit("parentsay");
          }
        }
      }
    }
  });
  // 這里就是MVVM中的View Model
  let vue = new Vue({
    el: '#app',
    // 這里就是MVVM中的Model
    data: {
    },
  });
</script>

三.Vue中子組件向父組件傳值

this.$emit中第一個(gè)參數(shù)為接收父組件傳遞的方法，第二個(gè)參數(shù)即為向父組件傳遞的值

<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(){
            // 第一個(gè)參數(shù): 需要調(diào)用的函數(shù)名稱
            // 后續(xù)的參數(shù): 給調(diào)用的函數(shù)傳遞的參數(shù)
            this.$emit("parentsay", "你好");
          }
        }
      }
    }
  });
  // 這里就是MVVM中的View Model
  let vue = new Vue({
    el: '#app',
    // 這里就是MVVM中的Model
    data: {
    },
    
  });
</script>

到此這篇關(guān)于Vue中父子組件的值傳遞與方法傳遞的文章就介紹到這了,更多相關(guān)Vue父子組件傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: