Vue 冷知识（一）

转载

mob604756e5abbc 2021-09-02 10:42:00

文章标签 vue ide 修饰符数据 html 文章分类 Node.js 前端开发

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 一样。