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) 停止侦听一个事件