一、不使用語法糖
? ? 1、組件注冊
? ? ? ? 注冊和vue2中基本相同
import nogrammarcomfrom "../components/nogrammarcom.vue";
export default {
components:{
nogrammarcom,
}
? 2、傳參
//父組件調(diào)用子組件，傳值name
<nogrammarcom :name="name" @func="func" style="color: red"> 插槽</nogrammarcom>
import nogrammarcomfrom "../components/nogrammarcom.vue";
import {ref,computed}from 'vue';
export default {
components:{
nogrammarcom,
},
? setup(){
const name=ref('我是父組件傳值給子組件')
const dynamic=ref(dy)
return {
name,
? ? ? dynamic,
? ? ? type,
? ? ? func(data){
console.log(data)
}
}
? ? 子組件
? ? 在setup（prpos,context）有兩個參數(shù)，其中prpos是父組件傳來的參數(shù)，因為prpos是響應數(shù)據(jù)，使用直接使用解離會失去響應屬性，需要使用到toRefs、toRef這兩個方法，toRefs方法當沒有這個參數(shù)的時候會報錯，然后我們就可以使用toRef了。如下
import {toRefs,toRef }from "vue"
export default {
props: {name:String },
? setup(props,context){
console.log(props)
let { name } =toRefs(props)
let name2? =toRef(props,'name')
console.log(name.value+'?')
? ? return{
????name,
? ? ? name2,
}
}
另一個參數(shù)context，是本身也有三個參數(shù)attrs,slots,emit，attrs組件的屬性，slots 組件內(nèi)的插槽，emit 自定義事件 子組件
export default {
props: {name:String },
? setup(props,context){
? ? const { attrs,slots,emit } = context//attrs組件的屬性，slots 組件內(nèi)的插槽，emit 自定義事件 子組件
? ? emit('func','我是子組件傳父組件的參數(shù)')//子組件向父組件傳值
? ? console.log(slots.default())//獲取插槽數(shù)據(jù)
? ? console.log(attrs.style)//組件屬性
? ? return{
? ? ? attrs
}
}
? ? 3、動態(tài)組件
? ? ? ? 動態(tài)組件是使用component 標簽 使用:is,根據(jù)需求展示不同的組件，基本使用方法vue2差不多
<component :is="dynamic"></component>
? ? <el-button type="info" @click="type=!type">切換動態(tài)組件
? import dynamic1from "../components/dynamic1.vue";
? import dynamic2from "../components/dynamic2.vue";
? import {ref,computed}from 'vue';
? export default {
components:{
? ? ? dynamic1,
? ? ? dynamic2
},
? ? setup(){
const type=ref(true)
const dy=computed(()=>{
????return type.value?dynamic1:dynamic2
})
const dynamic=ref(dy)
return {
name,
? ? ? ? dynamic,
}
}
}
</script>
二、使用語法糖
? ? 語法糖setup,在script標簽中直接使用，就相當于setup(),在語法糖中怎么使用setup中prpos和context參數(shù)呢，setup script語法糖提供了新的API來供我們使用
使用語法糖，在父組件中直接引用，無需注冊
defineProps?用來接收父組件傳來的 props ;?defineEmits?用來聲明觸發(fā)的事件。
<script setup>
? defineProps({
name:String
? })
let $myemit=defineEmits(['emitfun'])
const emitfun=()=>{
$myemit('emitfun','這是子組件傳的值')
}
</script>
