vue3使用1--父传子--组件传递消息（setup，props）

1、父组件

<template>
  <h2>APP父级组件</h2>
  <h3>msg:{{msg}}</h3>
  <!-- <button @click="msg += '==='">更新数据</button> -->
  <button @click="sendmsg">更新数据</button>
  <hr/>
  <child :msg="msg"/>

</template>
<script lang="ts">
import { defineComponent, ref} from 'vue'
//引入子级组件child
import Child from './components/Child.vue'
export default defineComponent({
  name: 'App',
  //注册组件
  components:{
    Child
  },
  setup(){
    //定义一个Ref类型的数据
    const msg = ref('hello how are you')
    function sendmsg(){
      msg.value += '==='
    }
    return{
      msg,
      sendmsg
    }
  }
})
</script>
<style>
</style>

2、子组件

<template>
    <h2>Child子级组件</h2>
    <h3>msg:{{msg}}</h3>
</template>

<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
  name: 'Child',
  props:['msg'],
  //setup细节问题
  //setup是在beforeCreate生命周期回调前执行的，而且就执行一次
  // beforeCreate(){
  //   console.log('beforeCreate执行了')
  // },
  // setup(){
  // setup(props,context){
  //   console.log(props.msg)
  //   console.log('setup执行了')
  //   return{
  //     //setup中一般都是返回一个对象，对象中的属性和方法都可以在html模板中直接使用
  //   }
  // }

})
</script>

<style>
</style>

3、测试结果