vue学习

RxnNing

已于 2023-01-28 11:14:11 修改

阅读量121

点赞数

分类专栏： vue 文章标签： v-model vue vue3

于 2022-05-24 11:04:59 首次发布

本文链接：https://blog.csdn.net/weixin_46211267/article/details/124943180

版权

vue 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue组件中实现v-model的两种方式，包括使用计算属性和监听器。同时，讨论了动态组件、元素定位限制及如何避免内容提升。还讲解了如何传入对象的所有属性，并强调了单向数据流的重要性。此外，涉及了prop验证的规则和v-model参数的使用，展示了如何自定义v-model的prop和事件名称。

摘要由CSDN通过智能技术生成

v-bind

v-bind如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除；
动态绑定多个值

<div v-bind="{id: 'container',class: 'wrapper'}"></div>

v-model 和组件搭配问题

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) { 
        this.$emit('update:modelValue', value)
      }
    }
  }
})

在该组件中实现 v-model 的另一种方法是使用 computed property 的功能来定义 getter 和 setter。get 方法应返回 modelValue property，set 方法应该触发相应的事件。

动态组件

# 组件名 currentTabComponent
<component v-bind:is="currentTabComponent" class="tab"></component>

元素位置受限

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

这个自定义组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。我们可以使用特殊的 is attribute 作为一个变通的办法：

当它用于原生 HTML 元素时，is 的值必须以 vue: 开头，才可以被解释为 Vue 组件。这是避免和原生自定义元素混淆。

传入一个对象的所有 property

<blog-post v-bind="post"></blog-post>
# 等价于
<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

单向数据流

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态，且 Vue 无法为此向你发出警告。作为一个通用规则，应该避免修改任何 prop，包括对象和数组，因为这种做法无视了单向数据绑定，且可能会导致意料之外的结果。
这里有两种常见的试图变更一个 prop 的情形：

# 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data property 并将这个 prop 作为其初始值：
props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}
# 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
props: ['size'],
computed: {
  normalizedSize() {
    return this.size.trim().toLowerCase()
  }
}

Prop 验证

// 多个可能的类型
    propB: [String, Number],
    required: true
    default: 100
// 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['success', 'warning', 'danger'].includes(value)
      }
    },

提示
注意 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

v-model 参数

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称：

在本例中，子组件将需要一个 title prop 并发出 update:title 事件来进行同步：

app.component('my-component', {
  props: {
    title: String
  },
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)">
  `
})