vue3组件传值（父传子，子传父）

父传子

   1.父组件 （子组件标签上定义一个属性，属性名=值）

<template>
  <div>父组件</div>
  <hr>
  <Son :msgNum="msg"></Son>
</template>
<script>
import { ref } from 'vue'
import Son from '@/components/SonDome.vue'
export default {
  components: { Son },
  setup() {
    const msg = ref(10)
    return {msg}
  }
}
</script>

2.子组件 props接收:['属性名']

<template class="son">
 <div>{{ msgNum }}</div>
<div>子组件</div>
</template>
<script>
export default {
  props: ['msgNum'],
}
</script>

父传子运行页面

子传父

1.父组件（在子组件标签上绑定一个方法=》@子组件方法名=‘父组件方法’）

<template>
  <div>父组件</div>
  <hr>
  <Son :msgNum="msg" @sonSet="fatherSet"></Son>
</template>
<script>
import { ref } from 'vue'
import Son from '@/components/SonDome.vue'
export default {
  components: { Son },
  setup() {
    const msg = ref(10)
    function fatherSet(data) {
      msg.value=data
    }
    return {msg,fatherSet}
  }
}
</script>

2.子组件触发父组件的方法

<template>
  <div>{{ msgNum }}</div>
<div>子组件</div>
<button @click="butClick">子组件修改的值</button>
</template>
<script>
export default {
  props: ['msgNum'],
  setup(props, { emit }) {
    function butClick() {
      emit('sonSet', 899)
    }
    return {butClick}
  }
}
</script>

运行结果