?1.非Prop的Attribute--禁用Attribute繼承
如果不希望組件的根元素繼承attribute，可以在組件的選項中設置 ` inheritAttrs:false`? 。例：
Vue.component('my-component', {? ?
? ? inheritAttrs: false,
? ? // ...
})
?2.修飾符
.lazy
在默認情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數據進行同步 (除了上述輸入法組織文字時)。你可以添加 lazy 修飾符，從而轉為在 change 事件之后進行同步：
<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" />
.number
如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：
<input v-model.number="age" type="number" />
這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。
.trim
如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符:
<input v-model.trim="msg" />
?3.Provide/Inject
https://v3.cn.vuejs.org/guide/component-provide-inject.html#provide-inject
通常，當需要從父組件向子組件傳遞數據時，使用props。
當有一些深度嵌套的組件，深層的子組件只需要父組件的部分內容，這種情況下，如果仍然將prop沿著組件鏈逐級傳遞下去，可能會很麻煩。
對于這種情況，可以使用一對 `provide `和` inject`。無論組件層次結構有多深，父組件都可以作為其所有子組件的依賴提供者。這個特性有兩個部分：父組件有一個 `provide` 選項來提供數據，子組件有一個 `inject` 選項來開始使用這些數據。
const app = Vue.createApp({})
app.component('todo-list', {? //父組件
? data() {
? ? return {
? ? ? todos: ['Feed a cat', 'Buy tickets']
? ? }
? },
? provide: {
? ? user: 'John Doe'
? },
? template: `
? ? <div>
? ? ? {{ todos.length }}
? ? ? <!-- 模板的其余部分 -->
? ? </div>
? `})
app.component('todo-list-statistics', {? //子組件
? inject: ['user'],
? created() {
? ? console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
? }})
要訪問組件實例 property，我們需要將 provide 轉換為返回對象的函數：
app.component('todo-list', {
? data() {
? ? return {
? ? ? todos: ['Feed a cat', 'Buy tickets']
? ? }
? },
? provide() {
? ? return {
? ? ? todoLength: this.todos.length
? ? }
? },
? template: `
? ? ...
? `})
這使我們能夠更安全地繼續(xù)開發(fā)該組件，而不必擔心可能會更改/刪除子組件所依賴的某些內容。這些組件之間的接口仍然是明確定義的，就像 prop 一樣。
· 父組件不需要知道哪些子組件使用它 provide 的 property
· 子組件不需要知道 inject 的 property 來自哪里
4.程序化的事件偵聽器
`$emit `可以被` v-on` 偵聽
· 通過` $on(eventName, eventHandler) `偵聽一個事件
· 通過` $once(eventName, eventHandler)` 一次性偵聽一個事件
· 通過 `$off(eventName, eventHandler)` 停止偵聽一個事件
