對(duì)于vue3街州，在上篇做了一個(gè)簡(jiǎn)單基本的介紹，沒(méi)有觀看的可以點(diǎn)擊：vue3簡(jiǎn)單了解谆奥，vue3的好處就不多說(shuō)了眼坏，此篇是介紹vue3一些基本的屬性和組件用途拂玻。
1). Setup
了解setup配置項(xiàng)酸些，vue3中著重強(qiáng)調(diào)了setup是怎么用如何用，setup主要有倆個(gè)參數(shù)檐蚜，
props魄懂，context,其中第二個(gè)參數(shù)是context。context 是一個(gè)普通的 JavaScript 對(duì)象闯第，它暴露三個(gè)組件的 property市栗，attrs，slots咳短，emit,這也對(duì)我們后面操作很有幫助填帽。
~1.Props的使用
props可以說(shuō)是針對(duì)父子組件傳值時(shí)用，用法上大徑相同咙好，取值方面略有不同篡腌。
//父組件
<About :name='name'></About> //引入子組件
import About from './About.vue'
import {ref} from 'vue' //響應(yīng)式聲明，ref是聲明基本數(shù)據(jù)類型
export default {
components:{
About
},
setup(){
const name = ref('Hello Vue3!!') //聲明變量時(shí)勾效，用ref包裹
return { //必須return ｀诘俊Ｅ迅Α！
name
}
}
}
//子組件
<template>
<div class="about">
<h1>{{ name }}</h1>
</div>
</template>
<script>
import { toRefs } from "vue"; //解構(gòu)props傳過(guò)來(lái)的值
export default {
props: { //必須得寫(xiě)接收的屬性杨伙，大致跟vue2相同
name: String,
},
setup(props) {
console.log(props); //Proxy {name: "Hello Vue3!!"}
const { name } = toRefs(props); //解構(gòu)name
return {
name,
};
},
};
</script>
~2.context的使用
context是一個(gè)普通的 JavaScript 對(duì)象其监，也就是說(shuō)，它不是響應(yīng)式的限匣，這意味著你可以安全地對(duì) context 使用ES6 解構(gòu)抖苦。
setup(props, context)
↓↓
setup(props, { attrs, slots, emit })
第一個(gè)是attrs
首先說(shuō)下attrs和props區(qū)別，attrs算是props的加強(qiáng)版：
1米死、props 要先聲明才能取值睛约，attrs 不用先聲明
2、props 聲明過(guò)的屬性哲身，attrs 里不會(huì)再出現(xiàn)
3辩涝、props 不包含事件，attrs 包含
4勘天、props 支持 string 以外的類型怔揩，attrs 只有 string 類型
想了解更多props,attrs區(qū)別
//父組件
<About :name="name" @click="dome1" @change="dome1" @mousedown="dome1"></About>
setup(props, { attrs, slots, emit }) {
const name = ref("Hello Vue3!!");
const dome1 = () => {
console.log('dome1');
}
return {
name,
dome1
};
},
//子組件
setup(props, { attrs, slots, emit }) {
console.log(props);
console.log(attrs);
},
從上圖我們可以看出，attrs不會(huì)打印props一樣的屬性脯丝，但是attrs可以打印方法商膊，這樣方便我們定義方法時(shí)，可以直接使用,attrs更為方便
第二個(gè)是slots
slots是對(duì)于插槽的變更宠进，可以獲取到組件之間的值晕拆。
//父組件
<About>Hello World!!!</About>
//子組件
<script>
import { h } from "vue"; //引入h配置
export default {
props: {
name: String,
},
setup(props, { attrs, slots, emit }) {
console.log(slots); //Proxy {default: ?, _: 1, __vInternal: 1}
return () => h('h1',{'class':'h1'},slots.default()) //用h來(lái)取到里面的值，并且可以設(shè)置樣式類名
},
};
</script>
<style lang="scss">
.h1{
background: red;
}
</style>
這樣用的話有個(gè)壞處材蹬，就是只能return這個(gè)h配置实幕，不能在setup里面做任何處理了，這塊如果有知道的堤器，感謝留言＠ケ印！闸溃！
第三個(gè)是emit
emit跟vue2用法一樣整吆，只不過(guò)vue3中emit是暴露出來(lái)的，可以直接使用
//子組件
<button @click="emits">點(diǎn)擊傳值</button>
const emits = () => {
emit("listVal", { name: "Vue3"});
};
//父組件
<About @listVal='listVal'>Hello World!!!</About>
setup(props, { attrs, slots, emit }) {
const listVal = (val) => {
console.log(val);
}
return {
listVal
};
},
以上是對(duì)vue3 setup中一些屬性的理解辉川，還沒(méi)有寫(xiě)完表蝙，等待更新，謝謝乓旗！
