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

1. props和$emit

父組件通過(guò)props向子組件傳遞數(shù)據(jù)，子組件通過(guò)$emit觸發(fā)父組件定義的事件來(lái)傳遞數(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

父組件可以通過(guò)$children屬性獲取到所有子組件的實(shí)例，并通過(guò)$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

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

父組件：

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

子組件：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-497261.html

<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)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！