Vue3 新手开发 ----- 记录问题

问题1： reactive声明响应式数据，数据赋值成功，视图不更新

<script setup>
import { reactive,ref } from 'vue'
 const obj = {
	name: '哈哈',
	sex: '男'
 }
 let formObj = reactive({})
 console.log(formObj)
 formObj = obj
 console.log(formObj)
</script>

上述示例中， form的值更新了，但是没有更新页面（可打印form，观察下更新前后的变化）

官方文档解释其原因：reactive（）返回的是一个原始对象的 Proxy，它和原始对象是不相等的（上图红框所示）。只有代理对象是响应式的，更改原始对象不会触发更新，其响应式就会失效。（上图黄框所示）

解决方式：

1、reactive外层包裹

const obj = {
  name: '哈哈',
  sex: '男'
}
let formObj = reactive({
  form:{
  }
})
formObj.form = obj

2、使用ref声明（更推荐）

const obj = {
  name: '哈哈',
  sex: '男'
}
let form= ref({})
form.value= obj

问题2：父组件如何调用子组件方法和值

使用 <script setup> 的组件默认是关闭的，不会暴漏任何在<script setup>中声明的绑定。

因此父组件不能直接访问子组件的方法和值，需要子组件主动抛出。

子页面：声明要暴漏的值和方法

<script setup>
import { reactive, defineExpose } from "vue";
const formObj = reactive({
 name: '哈哈',
 sex: '男'
})

function sonFun(){
    console.log('我是子组件')
}
defineExpose({
  formObj ,
  sonFun
})

</script>

父组件：获取暴漏的值和方法

<template>
    <child ref='childRef'/>
</template>
<script setup>
import { ref } from "vue";

const childRef = ref(null)

function getFun () {
    let  obj = childRef.value.formObj // 获取子组件值
    let fun = childRef.value.sonFun() // 获取子组件方法
}


</script>