Vue父子組件通訊方式及實(shí)現(xiàn)方法

更新時間：2023年06月25日 11:12:54 作者：前端每日三省

這篇文章主要介紹了Vue父子組件通訊方式及實(shí)現(xiàn)方法，文中通過代碼示例介紹的非常詳細(xì)，對我們的學(xué)習(xí)或工作有一定的幫助，感興趣的同學(xué)可以參考閱讀下

Vue父子組件通訊方式及實(shí)現(xiàn)

1. props和$emit

父組件通過props向子組件傳遞數(shù)據(jù)，子組件通過$emit觸發(fā)父組件定義的事件來傳遞數(shù)據(jù)。

父組件：

<template>
  <div>
    <child-component :message="message" @update-message="updateMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

子組件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New Message');
    }
  }
}
</script>

2. $parent和$children

父組件可以通過$children屬性獲取到所有子組件的實(shí)例，并通過$parent屬性獲取到自己的父組件實(shí)例。

父組件：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

子組件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage() {
      this.$parent.updateMessage('New Message');
    }
  }
}
</script>

3. $refs

父組件可以通過ref屬性給子組件設(shè)置一個引用，然后通過$refs獲取到子組件的實(shí)例，從而調(diào)用子組件的方法或者訪問子組件的屬性。

父組件：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    updateMessage() {
      this.$refs.child.updateMessage('New Message');
    }
  }
}
</script>

子組件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

到此這篇關(guān)于Vue父子組件通訊方式及實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue父子組件通訊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: