1.非Prop的Attribute--禁用Attribute继承
如果不希望组件的根元素继承attribute，可以在组件的选项中设置 inheritAttrs:false 。例：
Vue.component('my-component', {
inheritAttrs: false,
// ...
})
2.修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 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: `
...
`})
这使我们能够更安全地继续开发该组件，而不必担心可能会更改/删除子组件所依赖的某些内容。这些组件之间的接口仍然是明确定义的，就像 prop 一样。
- 父组件不需要知道哪些子组件使用它 provide 的 property
- 子组件不需要知道 inject 的 property 来自哪里
4.程序化的事件侦听器
$emit 可以被 v-on 侦听
- 通过
$on(eventName, eventHandler)侦听一个事件 - 通过
$once(eventName, eventHandler)一次性侦听一个事件 - 通过
$off(eventName, eventHandler)停止侦听一个事件