vue书写注意事项（1）

1. 传递一个数字时，需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算，如果不使用，会被当作字符串：

 

<!-- 传递真正的数值 -->

<comp v-bind:some-prop="1"></comp>

 

2. 如果向子组件传递的数据是一个对象，可以使用不带任何参数的 v-bind

todo: {

  text: 'Learn Vue',

  isComplete: false

}

然后：

 

<todo-item v-bind="todo"></todo-item>

 

3. 注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

4. prop验证：

正常情况下，我们不需要验证时，用的时字符串数据进行接收数据props：[‘a’,’b’];

如果需要对传入的数据进行验证，需要用对象的形式定义prop

 props: {
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // 可能是多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数值且有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

 

type 可以是下面原生构造器：

· String

· Number

· Boolean

· Function

· Object

· Array

· Symbol

type 也可以是一个自定义构造器函数，使用 instanceof 检测。

Prop在组件实例创建之前进行校验，所以在default或者validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。

 

5. 非prop特性，直接被传入子组件的根组件上，class和style会自动合并

6. 子组件向父组件通信，用$emit，父组件咋在模板上直接用 v-on 绑定

7. 给组件绑定原生事件，用.native修饰符，例如@click.native=’doSomeThing’

8. .sync组件修饰符，用于数据双向绑定，修改子组件里对应的数值，父组件对应的数值也会发生改变。vue内部自动触发了on 和emit事件。

如下代码

<comp :foo.sync="bar"></comp>

会被扩展为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

9. 使用表单输入时，子组件直接用props的value可以接收到父组件写的value值，不用父组件传递

默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突：

Vue.component('my-checkbox', {   model: {     prop: 'checked',     event: 'change'   },   props: {     checked: Boolean,     // 这样就允许拿 `value` 这个 prop 做其它事了     value: String   },   // ... })

 

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码等价于：

<my-checkbox   :checked="foo"   @change="val => { foo = val }"   value="some value"> </my-checkbox>

注意你仍然需要显式声明 checked 这个 prop。

10. 非父子间通信

简单情况下，可以申请一个空的vue实例作为事件总线，复杂情况使用vux去处理

var bus = new Vue()

 

// 触发组件 A 中的事件 bus.$emit('id-selected', 1)

 

// 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) {   // ... })