前端开发笔记 ｜ Vue 3 子组件和父组件交互

在上一篇文章《前端开发笔记 ｜ React Hooks子组件和父组件交互》里面我介绍了在使用React Hooks的开发方式下，子组件和父组件的交互，那现在就来介绍下Vue 3中的子组件和父组件的交互。

父组件调用子组件

子组件定义文件SubItem.vue

<script>
export default {
  props: {
    btnText: String
  }
}
</script>

<template>
  <div>
    <button v-text="btnText" @click="$emit('changeBtnText')" />
  </div>
</template>

父组件调用子组件父组件调用子组件

<script>
import SubItem from '../components/SubItem.vue'
export default {
  components: { SubItem },
  data() {
    return {
      btnText: '测试'
    }
  },
  methods: {
    changeBtnText() {
      this.btnText = '改变按钮文案'
    }
  }
}
</script>

<template>
  <div>
    <sub-item :btnText="btnText" @change-btn-text="changeBtnText" />
  </div>
</template>

这就是简单的在父组件中调用子组件，由父组件控制子组件的按钮的展示和点击事件。

子组件改变父组件

父组件定义

<script>
import SubItem from '../components/SubItem.vue'
export default {
  components: { SubItem },
  data() {
    return {
      btnText: '测试'
    }
  },
  methods: {
    changeBtnText(value) {
      this.btnText = value
    }
  }
}
</script>

<template>
  <div>
    <button id="main-btn" v-text="btnText" />
    <sub-item @change-btn-text="changeBtnText" />
  </div>
</template>

子组件文件SubItem.vue中刷新父组件按钮文案

<script>
export default {
  methods: {
    onClick() {
      console.log('改变父组件按钮')
      this.$emit('changeBtnText', '改变按钮文案')
    }
  }
}
</script>

<template>
  <div>
    <button @click="onClick">改变父组件按钮</button>
  </div>
</template>

实际效果：点击子组件中“改变父组件按钮”，父组件中的按钮#main-btn的文案从“测试”变成了“改变按钮文案“，同时在Console中输出”改变父组件按钮“。

这就是使用Vue 3开发下，子组件和父组件的交互，Vue 3.0开发代码很简洁，目前在国内也非常流行。