vue 回顾

①.组件的注册

全局注册：

// 注册

Vue.component('my-component', {

  template: '<div>A custom component!</div>'

})

// 创建根实例

new Vue({

  el: '#example'

})

局部注册：

var Child = {

  template: '<div>A custom component!</div>'

}

new Vue({

  // ...

  components: {

    // <my-component> 将只在父组件模板中可用

    'my-component': Child

  }

})

②.特殊标签 ol ul table select 注意事项

当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像 <ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。

在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>

  <my-row>...</my-row>

</table>

自定义组件 <my-row> 会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：

<table>

  <tr is="my-row"></tr>

</table>

③.使用prop传递数据

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

子组件要显式地用 prop选项声明它预期的数据：

Vue.component('child', {

  // 声明 props

  props: ['message'],

  // 就像 data 一样，prop 也可以在模板中使用

  // 同样也可以在 vm 实例中通过 this.message 来使用

  template: '<span>{{ message }}</span>'

})

然后我们可以这样向它传入一个普通字符串：

<child message="hello!"></child>

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：

Vue.component('child', {

  // 在 JavaScript 中使用 camelCase

  props: ['myMessage'],

  template: '<span>{{ myMessage }}</span>'

})

<!-- 在 HTML 中使用 kebab-case -->

<child my-message="hello!"></child>

④.动态绑定Prop

<div>

  <input v-model="parentMsg">

  <br>

  <child v-bind:my-message="parentMsg"></child>

</div>

//你也可以使用 v-bind 的缩写语法：

<child :my-message="parentMsg"></child>

如果一个对象需要prop传递，可以不带任何参数：

todo: {

  text: 'Learn Vue',

  isComplete: false

}

//然后：

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

//将等价于：

<todo-item

  v-bind:text="todo.text"

  v-bind:is-complete="todo.isComplete"

></todo-item>

⑤.字面量语法Vs动态语法

初学者常犯的一个错误是使用字面量语法传递数值：

<!-- 传递了一个字符串 "1" -->

<comp some-prop="1"></comp>

因为它是一个字面量 prop，它的值是字符串 "1" 而不是一个数值。如果想传递一个真正的 JavaScript 数值，则需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算：

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

⑥.prop验证

Vue.component('example', {

  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

      }

    }

  }

})

⑦.使用v-on绑定自定义事件

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

<div id="counter-event-example">

  <p>{{ total }}</p>

  <button-counter v-on:increment="incrementTotal"></button-counter>

  <button-counter v-on:increment="incrementTotal"></button-counter>

</div>

Vue.component('button-counter', {

  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',

  data: function () {

    return {

      counter: 0

    }

  },

  methods: {
//点击子组件

    incrementCounter: function () {

      this.counter += 1
//触发父组件

      this.$emit('increment')

    }

  },

})

//父组件事件

new Vue({

  el: '#counter-event-example',

  data: {

    total: 0

  },

  methods: {

    incrementTotal: function () {

      this.total += 1

    }

  }

})

巴特西

vue 回顾

最新文章

热门文章