Vue3 双向数据绑定

示例：父组件传递100到子组件，子组件拿到之后显示出来，然后将值改为50，将在父组件中回显。最终结果如下图所示：

• Father.vue

  父组件
  {{ money }}
  
  
  
  



import {ref} from 'vue'
import Son from "./Son.vue"

export default {
  name: 'Father',
  //注册子组件
  components: {
    Son
  },
  setup() {
    let money = ref(100)
    let update_money = (param) => {
      console.log(param)
      money.value = param
    }
    return {money, update_money}
  }
}

• Sun.vu

  子组件
  从父组件中获取到的钱：{{ money }}
  
  儿子花50
  
  子组件花费后剩下的钱： {{ qian }}



import {ref} from 'vue'

export default {
  name: "Son",
  //子组件使用props接收父组件的数据(直接使用)
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  // 定义抛出的事件名称
  emits: ['chang_money'],
  setup(props, {emit}) {
    //子组件通过props拿到父组件传递过来的数据（可进行处理）
    let qian = ref(props.money)

    const xiaoFei = () => {
      //通知父组件，money变成了50
      qian.value = qian.value - 50
      emit('chang_money', qian.value)
    }

    return {qian, xiaoFei}
  }
}