Vue components(組件)
全域的components 是放在main.js中
在components新增一個component後
在main中註冊
把create(App).mount("#app");
改為 const app = create(App);
app.component('註冊名稱' , component name)
app.mount("#app");
並且上面要import 該隻vue
非全域註冊就單純放在該程式的import就好
//props
const props = defineProps(["A" , "B" , "C"]); //取得傳入參數值
要設定在template內使用的話 則會需要在要設定的參數前加一個:
如 :class = "props.A";
const propsObject = defineProps({
A : {
type : "String" //參照你要傳的東西
default : "icon" //未傳入時顯示
},
B : {
type : "int" , //參照你要傳的東西
default : "icon" //未傳入時顯示
}
obj : {
type : Object ,
default : () => ({}) //官方建議這樣寫 不建議直接{} 因為會被誤認為一個function
}
arr : {
type : Array ,
default : () => [] //這個不會被誤認 因此可以直接這樣寫
}
});
() => ({}) 這個等同於 () => {
return {};
}
//emit
<script>
const emit = defineEmits(["AddInt"]);
const handleAddClick = (event , a = 1 ,b = 2) => {
const c = a + b;
emit("AddInt" , c);
}
</script>
<template>
<div>
<button @click = "handleAddClick ">click</button> //按按鈕後使用function
</div>
</template>
然後其他地方可以直接呼叫這隻components 來達成目的
這段也是老樣子 emit("defineEmits Name" , data)
然後下判斷式後再回傳 裡面可以寫一個function
//動態切換Component
//宣告當作切換的值
const isChange = ref(0)
//實作切換方法
const Component = computed(() => {
switch(key)
case 0:
return method1;
case 1:
return method2;
});
const changeComponent = (idx) => {
isChange.value = idx;
}
<template>
<button @click="changeComponent(0)> 0 </button>
<button @click="changeComponent(1)> 1 </button>
<button @click="changeComponent(2)> 2 </button>
</template>
留言
張貼留言