【VUE3】父子组件之间的传值

父组件向子组件传值

父组件给子组件绑定值

<child :msg="text"/>

子组件获取props

<script>
import {toRefs} from 'vue'
export default {
  props: {
    msg: String,
  },
  setup(props, context){
      // 获取父组件传过来的值
      const {msg} = toRefs(props)
      console.log(msg);
  }
};
</script>

子组件向父组件传值

子组件emit触发

<template>
    <div @click="changeValue">子组件传给父组件</div>
</template>

<script>
import {toRefs} from 'vue'
export default {
  props: {
    msg: String,
  },
  setup(props, {emit}){
      // 获取父组件传过来的值
      const {msg} = toRefs(props)
      console.log(msg);
      // 传值给父组件
      function changeValue(){
        // 类似vue2的this.$emit
        emit('change','子组件传给父组件')
      }
     
      return {
          changeValue
      }
  }
};
</script>

父组件

<template>
    <child :msg="text" @change="changeValue"/>
</template>

script部分
<script>
import child from './child.vue'
export default {
  name: "HelloWorld",
  components:{
      child,
  },
  setup(){
      function changeValue(data){
          // 获取子组件传过来的值
          console.log(data);
      }
      return {
        changeValue
      }
  }
};
</script>