vue3父子通信ref,toRef,toRefs使用實例詳解

更新時間：2023年10月08日 15:37:47 作者：qq_42750608

這篇文章主要介紹了vue3父子通信ref,toRef,toRefs使用實例詳解,分別介紹了ref是什么、toRef是什么及toRefs是什么和最佳使用方式,結合示例代碼給大家講解的非常詳細,需要的朋友可以參考下

ref是什么?

生成值類型的響應式數(shù)據(jù)
可用于模板和reactive
通過.value修改值
可以獲取DOM元素

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

// 獲取dom元素

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

toRef是什么?

針對一個響應式對象(reactive封裝)的prop屬性!!!
創(chuàng)建一個ref, 具有響應式
兩者保持引用關系

toRefs是什么?

將響應式對象(reactive封裝)轉換為普通對象
對象的每個prop屬性都是對應的ref
兩者保持引用關系

最佳使用方式

用reactive做對象的響應式, 用ref做值類型響應式
需要解構響應式對象使用toRefs(state), 只需要獲取單個響應式值類型使用toRef(state, ‘xxx’);
ref的變量命名都用xxRef
合成函數(shù)返回響應式對象時, 用toRefs(usexx這種鉤子函數(shù));

使用示例:

1. 子組件, script標簽是這種寫法: <script setup lang="ts">時

<script setup lang="ts">
import { ref, reactive, toRef, toRefs, defineProps } from 'vue';
// 父組件傳數(shù)據(jù) :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>
  <h1>{{ msg }}</h1>
  <h1>{{ msgRef }}, 我叫:{{ nameRef }}, 年齡:{{ ageRef }}, 性別:{{ sexRef }}</h1>
  <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); // 父組件傳進來的數(shù)據(jù)
    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>
  <h1>{{ msgRef }}, 我叫:{{ nameRef }}, 年齡:{{ ageRef }}, 性別:{{ sexRef }}</h1>
  <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>

到此這篇關于vue3父子通信+ref,toRef,toRefs使用實例的文章就介紹到這了,更多相關vue3 ref toRef toRefs使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: