vue3 组件通讯

父传子

父组件

<template>
  <div>
    <div>父组件</div>
    <h1>{{ money }}</h1>
    <hr />
    <Son :money="money" />
  </div>
</template>

<script>
import { ref } from 'vue'
import Son from './son.vue'
export default {
  name: 'app',
  components: { Son },
  // 父组件的数据传递给子组件
  setup () {
    const money = ref(100)
    return { money }
  }
}
</script>

<style>
</style>

子组件

<template>
  <div>
    <div>子组件</div>
    <h1>{{ money }}</h1>
  </div>
</template>

<script>
import { onMounted } from 'vue'
export default {
  name: 'son',
  // 子组件接受父组件数据使用props
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  setup (props) {
    // 获取父组件数据money
    console.log(props.money);

    // 获取失败
    // onMounted(() => {
    //   console.log(this.money);
    // })
  }
}
</script>

<style>
</style>

子组件在setup中可以通过setup的第一个参数获取到父组件传过来的props

子传父

父组件

<template>
  <div>
    <div>父组件</div>
    <h1>{{ money }}</h1>
    <hr />
    <Son :money="money" @change-money="updateMoney" />
  </div>
</template>

<script>
import { ref } from 'vue'
import Son from './son.vue'
export default {
  name: 'app',
  components: { Son },
  // 父组件的数据传递给子组件
  setup () {
    const money = ref(100)
    const updateMoney = (newMoney) => {
      console.log(newMoney);
      money.value = newMoney
    }
    return { money, updateMoney }
  }
}
</script>

<style>
</style>

子组件

<template>
  <div>
    <div>子组件</div>
    <h1>{{ money }}</h1>
    <button @click="changeMoney">修改数据</button>
  </div>
</template>

<script>
import { onMounted } from 'vue'
export default {
  name: 'son',
  // 子组件接受父组件数据使用props
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  //   setup中常用的两个参数
  // props 父组件数据
  // emit 触发自定义事件的函数
  setup (props, { emit }) {
    // 获取父组件数据money
    console.log(props.money);

    // 获取失败
    // onMounted(() => {
    //   console.log(this.money);
    // })
    const changeMoney = () => {
      // money - 50
      // 通知父组件，money变为50
      emit('change-money', 50)
    }
    return { changeMoney }
  }
}
</script>

<style>
</style>

setup两个参数，props，context

props用来接收父组件传参

context 可以解构出 emit 用来触发自定义事件，实现子传父

扩展

在vue2的版本，.sync 除去v-model实现双向数据绑定的另一种方式

<Son :money="money" @update:money="fn" />

简写

<Son :money.sync="money" />

vue3的时候不支持.sync

使用v-model:money="money"即可

<Son :money="money" @update:money="fn" />

总结：

1.父传子：在setup中使用props数据，在setup（props） //props就是父组件传过来的数据

2.子传父：触发自定义事件的时候emit来自 setup（props,{emit}）

3.在vue3中v-model和.sync 已经和平成v-model指令