写法一(vue3的写法)
<template>
<HelloWorld />
<h1>{{ a3 }}</h1>
<h1>{{ b3 }}</h1>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref, provide, readonly, reactive, toRefs } from "vue";
export default {
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
这个问题,解决办法是写成函数式的,如下:文章来源:https://www.toymoban.com/news/detail-640133.html
<template>
<div>
<div>Son1的msg:{{ msg }}</div>
<Son2></Son2>
</div>
</template>
<script>
import Son2 from './Son2.vue';
import { inject, provide, readonly } from 'vue';
export default {
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'
import ChildComponents 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 add
const 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 component
const list = inject('list')
</script>
ref,reactive的区别:
文章来源地址https://www.toymoban.com/news/detail-640133.html
到了这里,关于【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!