vue3.x 父组件向子组件传值

父组件

<template>
    <childrenComponent ref="childrenComponentRef" :msg="msg"></childrenComponent>
</template>

<script>
  import childrenComponent from './childrenComponent.vue'
    export default {
        name: "parentComponent",
        components:{childrenComponent},
        setup(){
          const childrenComponentRef= ref(null); //定义子组件ref
         //或者 
          	//泛型默认值语法<T = any>
		    //type Ref<T = any> = {
		        //value : T
		   // }
         // const childrenComponentRef:Ref<div | null> = ref(null);
         
          const msg = ref("我是消息");
          return{
               childrenComponentRef,
               msg 
           }
       }
   }
</script>

子组件接收

<template>
   <p>{{msgCopy}}</p>
</template>

<script>
   import {ref,reactive,onMounted} from 'vue'
    export default {
        name: "childrenComponent",
         props:{
            msg: String
        },
        setup(props){
            console.log(props.msg)
            const msgCopy = ref("");
            msgCopy.value = props.msg;
            return{
                msgCopy
            }
        }
    }
</script>

另一种写法：

父组件
在script标签加上 ts(typescript), setup语法糖

<template>
    <childrenComponent ref="childrenComponentRef" :msg="msg"></childrenComponent>
</template>

<script lang="ts" setup>
  import childrenComponent from './childrenComponent.vue'
  const childrenComponentRef= ref(null); //定义子组件ref
  //或者  const childrenComponentRef:Ref<div | null> = ref(null);
   const msg = ref("我是消息");
</script>

子组件接收
用defineProps定义vue2里面的props

<template>
   <p>{{msgCopy}}</p>
</template>

<script>
   import {ref,reactive,onMounted} from 'vue'
  	const props = defineProps({
      msg: {
          type: String,
          default:()=>{ //定义默认值
              return "消息"
          }
      }
    })
    console.log(props.msg)
    const msgCopy = ref("");
    msgCopy.value = props.msg;
</script>