vue3父子通信+ref,toRef,toRefs使用实例

ref是什么?

  1. 生成值类型的响应式数据
  2. 可用于模板和reactive
  3. 通过.value修改值
  4. 可以获取DOM元素

<p ref="elemRef">{{nameRef}} -- {{state.name}}</p>

// 获取dom元素

onMounted(()=>{ console.log(elemRef.value); });

toRef是什么?

  1. 针对一个响应式对象(reactive封装)的prop属性!!!
  2. 创建一个ref, 具有响应式
  3. 两者保持引用关系

toRefs是什么?

  1. 将响应式对象(reactive封装)转换为普通对象
  2. 对象的每个prop属性都是对应的ref
  3. 两者保持引用关系

最佳使用方式

  1. 用reactive做对象的响应式, 用ref做值类型响应式
  2. 需要解构响应式对象使用toRefs(state), 只需要获取单个响应式值类型使用toRef(state, 'xxx');
  3. ref的变量命名都用xxRef
  4. 合成函数返回响应式对象时, 用toRefs(usexx这种钩子函数);

使用示例:

  1. 子组件, script标签是这种写法: <script setup lang="ts">时

    <script setup lang="ts"> import { ref, reactive, toRef, toRefs, defineProps } from 'vue'; // 父组件传数据 :msg="xxx" defineProps({ msg: String }); // 子组件通知父组件使用@onSayHello="xxx", 子组件需要使用时eg: emites('onSayHello', 'hello啊啊啊啊') interface IEmits { (e: 'onSayHello', arg1: String): void; } const emites = defineEmits<IEmits>(); const state = reactive({ name: 'alice', age: 20, sex: '女' });

    // 将reactive封装的对象, 使用toRefs获取的对象, 它可以进一步解构, 获取响应式值类型变量
    const stateRef = toRefs(state);
    const { name: nameRef, age: ageRef } = stateRef
    // 将reactive封装的对象, 使用toRef获取某个属性值, 具备响应式
    const sexRef = toRef(state, 'sex')
    const sayHello2 = () => {
    msgRef.value = '你好!'
    emites('onSayHello', 'hello-----')
    }
    // xx.key = ???适用于reactive封装的响应式对象
    const updateState = () => {
    state.name = '双双';
    state.age = 22;
    state.sex = '男';
    // 或者找到响应式值类型,使用 .value进行修改
    // nameRef.value = '双双'
    // ageRef.value = 22
    // sexRef.value = '男'
    }
    // ref值类型, 使用.value进行修改
    const updateRef = () => {
    msgRef.value = 'hello!'
    }

    const msgRef = ref('值类型');
    </script>

    <template>

    {{ msg }}

    {{ msgRef }}, 我叫:{{ nameRef }}, 年龄:{{ ageRef }}, 性别:{{ sexRef }}

    <button @click="sayHello2">打招呼</button> <button @click="updateState">修改名字,年龄,性别</button> <button @click="updateRef">用英文打招呼</button> </template> <style scoped> .read-the-docs { color: #888; }

    button {
    margin: 10px;
    }
    </style>

  2. 子组件, script标签是这种写法: <script>时

    <script> import { ref, reactive, toRef, toRefs } from 'vue' export default { props: { msg: String }, emits: ['onSayHello'], setup(props, { emit }) { console.log(props); // 父组件传进来的数据 const state = reactive({ name: 'alice', age: 20, sex: 1 });
     // 将reactive封装的对象, 使用toRefs获取的对象, 它可以进一步解构, 获取响应式值类型变量
     const stateRef = toRefs(state);
     const { name: nameRef, age: ageRef } = stateRef
     // 将reactive封装的对象, 使用toRef获取某个属性值, 具备响应式
     const sexRef = toRef(state, 'sex')
     const sayHello2 = () => {
       msgRef.value = 'hello, 你好!'
       emit('onSayHello', 'hello-----')
     }
     // xx.key = ???适用于reactive封装的响应式对象
     const updateState = () => {
       state.name = '双双';
       state.age = 22;
       state.sex = 0;
     }
     // ref值类型, 使用.value进行修改
     const updateRef = () => {
       msgRef.value = '你好啊!'
       ageRef.value = 33
       sexRef.value = '男'
     }
    
     const msgRef = ref('值类型');
    
     // 注意要返回变量和方法等模板需要使用的东西, 否则页面不会渲染
     return {
       msgRef,
       sayHello2,
       nameRef,
       ageRef,
       sexRef,
       updateState,
       updateRef,
     }
    

    }
    }
    </script>

    <template>

    {{ msgRef }}, 我叫:{{ nameRef }}, 年龄:{{ ageRef }}, 性别:{{ sexRef }}

    <button @click="sayHello2">say hello</button> <button @click="updateState">修改state的值</button> <button @click="updateRef">修改ref的值</button> </template> <style scoped> button { margin: 10px; } </style>

父组件: App.vue

<script setup>
import HelloWorld from './components/Test2.vue'
function onSayHello(a) {
  console.log(a)
}
</script>

<template>
  <HelloWorld msg="Vite + Vue" @onSayHello="onSayHello"/>
</template>

<style scoped>
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer085 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf5 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript