Vue子組件與父組件之間的通訊

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>
    <div>
        <div v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </div>
    </div>
</template>

<script>
export default {
    name: 'child',
    props: {
        c: Array
    }
}
</script>

<style  scoped>
    
</style>

在Home.vue中註冊Child組件，並在template的div標籤中添加home-child標籤，標籤中使用v-bind指令綁定c。子組件經過props就能夠接受到這個父組件傳遞的值。

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

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

<style scoped>

</style>

結果

3.子組件向父組件傳值

給按鈕綁定點擊事件ChildClick
在事件的函數中使用$emit來觸發一個自定義事件，並傳遞一個參數，這個參數就是子組件要傳遞給父組件的值。

<template>
    <div>
        <div v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </div>
        <button v-on:click="ChildClick">點擊向父組件傳值</button>
        <span>{{data}}</span>
    </div>
</template>

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

<style  scoped>

</style>

在父組件中的home-child標籤中監聽該自定義事件，並添加一個響應該事件的方法ShowChild。

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

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

<style scoped>

</style>

結果：

點擊按鈕後：