Vue组件基础

Vue组件基础

每用一次组件，就会有一个它的新实例被创建

data必须是一个函数

一个组件的data选项必须是一个函数，因此每个函数可以维护一份被返回对象的独立拷贝。

避免一个实例，影响到其他所有实例。

动态传递prop

可以使用v-bind来动态传递prop。一开始不清楚要渲染的具体内容，比如从一个api获取博文列表的时候，是非常有用的。

单个根元素

每个组件必须只有一个根元素

当组件变得越来越复杂的时候，为每个相关信息定义一个prop会变得很麻烦。

所以让它变成一个单独的post prop

在组件上使用v-model

自定义事件也可以用于创建v-model的自定义组件

v-mdoel实际上为语法糖

//等价于

当用在组件上时，v-model则会这样

为了让它正常工作，这个组件内的

• 将其value特性绑定到一个名叫value的prop上
• 在其input事件被触发时，将新的值通过自定义的input事件抛出

Vue.component('custom-input', {
  props: ['value'],
  template: `
    
  `
})
//重写input事件传出的值，因为v-model在自定义组件和在上不一致

通过插槽分发内容

在需要的地方加入插槽

动态组件

动态和异步组件

解析DOM模版时的注意事项

有些 HTML 元素，诸如

,
,，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
1. ,
,，只能出现在其它某些特定的元素内部

使用这些有约束条件的元素时会遇到一些问题

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

需要注意的是以下来源使用模版的话，这条限制是不存在的

• 字符串 (例如：template: '...')
• 单文件组件 (.vue)