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>
    <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>

結果

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>

結果：

點擊按鈕後：

相關文章：實例詳解vue元件間通信子與父詳解（二）

vue子元件與父元件通訊詳解

###

以上是Vue子元件與父元件之間的通訊（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！