最近自己在学习vue3.0-studying，虽然啥也不是，但是该学的还得学。。。
再练习一个父子传值的案例是遇到了一个问题。就是父组件传给子组件的值，父组件改变的时候而子组件不改变。
原因：子组件中的setup函数只能执行一次，所以组件中的值更新时，子组件就不听话了。。。
解决方法:使用了vue3.0里的watchEffect方法

父传子

1.父组件

父组件:引入子组件，并且把值传给子组件

<template>
    <input type="text" v-model="msg">
    <HelloWorld :send="msg"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import {reactive,toRefs} from "vue"
export default {
  setup(){
     const state = reactive({
        msg:"hahaha"
     }) 
     
     return{
         ...toRefs(state)
     }
  } 
 }
</script>

2.子组件

子组件：先用props来接收，然后将接收到值变成响应式–ref

<template>
    <div>{{data}}</div>
    <div>传值啊哈哈哈</div>
</template>

<script>
import {ref} from "vue"
export default {
  name: 'HelloWorld',
  props: {
    send: String
  },
  setup(props){
    const data = ref(props.send)
    return{
      data
    }
  },
}
</script>

然后就是它不能随着父组件的值改变而改变。。。
解决后代码如下：

  setup(props){
    const state = reactive({
       data:""
    })
    watchEffect(()=>{
       state.data = props.send
    })
    return{
      ...toRefs(state)
    }
  },

然后就能去改变了。。。然后我就又去细细的看了看官网的解释

官方地址：https://v3.cn.vuejs.org/api/computed-watch-api.html#computed

欧克欧克，如果大佬有其他的解决方法，也可以说出来，增长我的知识，多谢多谢