Vue子元件與父元件之間的通訊（附代碼）-js教程-PHP中文網

首頁

web前端

js教程

Vue子元件與父元件之間的通訊（附代碼）

php是最好的语言

Aug 06, 2018 pm 03:54 PM

htmljavascriptvue.js

1.環境建構

下載vue-cli：npm install -g vue-cli
#初始化專案：
vue init webpack vue-demo
#進入vue-demo資料夾：
cd vue-demo
#下載安裝依賴：
npm install
#執行該專案：
npm run dev

2.父元件傳送值給子元件

src/components/資料夾下建立一個元件，Home.vue
建立子元件，在src/components/資料夾下新建一個資料夾，在新資料夾中新建一個元件Child.vue

在Child.vue中建立props，用於接收父元件傳遞的值

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array
    }
}
</script>

<style  scoped>
    
</style>

在Home.vue中註冊Child元件，並在template的p標籤中加入home-child標籤，標籤中使用

v-bind指令綁定c。子元件透過props就可以接受到這個父元件傳遞的值。

<template>
  <p class="hello">
    <home-child v-bind:c="c"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3]
    }
  }
}
</script>

<style scoped>

</style>

結果

Vue子元件與父元件之間的通訊（附代碼）

3.子元件傳送值

#給按鈕綁定點擊事件ChildClick

在事件的函數中使用$emit來觸發一個自訂事件，並傳遞一個參數，這個參數就是子元件要傳遞給父元件的值。

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
        <button v-on:click="ChildClick">点击向父组件传值</button>
        <span>{{data}}</span>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array,
        data: String
    },
    methods: {
        ChildClick: function () {
            this.$emit("ListenChild","I am child.vue")
        }
    }
}
</script>

<style  scoped>

</style>

在父元件中的home-child標籤中監聽該自訂事件，並新增一個回應該事件的方法ShowChild。

<template>
  <p class="hello">
    <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;Home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3],
      data: " "
    }
  },
  methods: {
    ShowChild: function (data) {
      this.data = data
      console.log("data:" + data)
    }
  }
}
</script>

<style scoped>

</style>

結果：