写法一(vue3的写法)
<template><HelloWorld /><h1>{{ a3 }}</h1><h1>{{ b3 }}</h1></template><script>importHelloWorld from "./components/HelloWorld.vue";import{ ref, provide, readonly, reactive, toRefs } from "vue";exportdefault{
name:"App",
components:{
HelloWorld,},setup(){const a3 =ref("1000");const obj3 =reactive({// 建立响应式映射
b3:'bbb'})provide("a3",readonly(a3));// readonly设置provide指定属性名为只读provide("obj3", obj3);setTimeout(()=>{
a3.value ="2000";
obj3.b3 ="bbbbbb";},3000);return{// 返回值给到setup
a3,...toRefs(obj3)// 结构reactive内的对象属性,具体作用参考下面的截图};},};</script>
toRefs定义:
toRefs可以将对象(只能接收rective对象)中的属性变成响应式。
正常reactive对象数据也是响应式的,如果用toRefs解构出去会更加方便。
toRefs什么时候用?
数据量如果很多, 我们一般会用解构来简化代码, 那么在vue3 中如果使用对象的解构, 会让改对象失去响应式, 所有一般解构的时候 借助 toRefs 来解构仍然带有响应式。
解构后, 我们就不需要 用 对象
.
属性了, 而是可以直接使用属性,来简化。
<h3>{{name}}</h3>
let obj =reactive({ name:'kebi'})return{...toRefs(obj)}
写法二(vue2的写法)
扩展:Vue使用
provide
各种传值后
inject
获取
undefined
的问题及解决
vue2
的写法是函数式写法,如果以
vue3
的写法例如:
// 父组件mounted(){provide("obj3", obj3);}
// 子组件mounted(){const list =inject('list');}
则会产生
inject
获取后打印log
undefined
这个问题,解决办法是写成函数式的,如下:
<template><div><div>Son1的msg:{{ msg }}</div><Son2></Son2></div></template><script>importSon2 from './Son2.vue';import{ inject, provide, readonly } from 'vue';exportdefault{
name:'Son1',
components:{
Son2,},data(){return{
sMsg:'',}},provide(){return{
msg:readonly(inject('msg')+'->son1'),}},
inject:['msg'],mounted(){// this.sMsg = inject('msg') + '->son1';// console.log('this.sMsg', this.sMsg)}};</script>
写法三(vue3的写法)
父组件provide/inject
<template><!-- child component --><child-components></child-components><!-- parent component --><div class="child-wrap input-group"><input
v-model="value"
type="text"class="form-control"
placeholder="Please enter"/><div class="input-group-append"><button @click="handleAdd"class="btn btn-primary" type="button">
add
</button></div></div></template><script setup>import{ ref, provide } from 'vue'importChildComponents from './child.vue'const list =ref(['JavaScript','HTML','CSS'])const value =ref('')// Provide data to child components.provide('list', list.value)// event handling function triggered by addconst handleAdd =()=>{
list.value.push(value.value)
value.value =''}</script>
子组件provide/inject
<template><ul class="parent list-group"><li class="list-group-item" v-for="i in list":key="i">{{ i }}</li></ul></template><script setup>import{ inject } from 'vue'// Accept data provided by parent componentconst list =inject('list')</script>
ref,reactive的区别:
版权归原作者 hzxOnlineOk 所有, 如有侵权,请联系我们删除。