沒有廢話的vue進階( 一 )

摘要： vue元件主要包含： 由vue-router產生的頁面，可以稱之為路由元件 獨立基礎元件：例如Date和input這之類的可以全域性複用的基礎元件 業務元件，除了以上兩種就是業務元件 元件精髓 props tppe 型別 de...

vue元件主要包含：

1. 由vue-router產生的頁面，可以稱之為路由元件
2. 獨立基礎元件：例如Date和input這之類的可以全域性複用的基礎元件
3. 業務元件，除了以上兩種就是業務元件

元件精髓

props

• tppe 型別
• default 預設
  • 如果是物件，陣列，必須要寫成方法進行返回

msg:{
type: Array,
default: ()=>([])
}
複製程式碼

• validator 校驗，有一個引數value
• inheritAttrs 是否繼承html特性
• 子元件不能修改父元件傳遞過來的prop

event

方法一

<parent-com @on-click="handleClick"></parent-com>

子元件
<button>點選</button>
在子元件中觸發
this.$emit('on-click', event);
複製程式碼

方法二

加上.native就是原生方法
<parent-com @click.native="handleClick"></parent-com>

子元件
<button>點選</button>
複製程式碼

slot

<slot> 節點就是指定的一個插槽的位置,v-slot:[name]可以指定插槽的位置，有了name就叫具名插槽