vue学习十一(全局局部组件、prop传不同值、 v-bind 动态赋值、单向数据流、prop校验)

全局注册

我们只用过 Vue.component 来创建组件
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如

局部注册

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象

我们看下面的例子：

dom模板解析注意事项

有些 HTML 元素，诸如

、
、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
1. 、
和 ，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

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

我们看一个例子如下：

用 Prop 传递不同值类型

以前只看到了以字符串数组形式列出的 prop
但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

我们看下面这个例子：

效果输出如下：

hello!

用 Prop通过 v-bind 动态赋值

效果图如下：

父组件初始化数据  父组件初始化数据

用 Prop传递对象的所有属性

方式一我们可以使用v-bind:prop-name进行对象属性的传递

方式二我们可以使用不带参数的 v-bind

输出效果如下：

LearnVue

用 Prop传递对象数组

输出效果如下：

Learn,Vueyes,no

用 Prop传入一个数字

输出如下：

1+23 24

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图改变一个 prop 的情形：

1、这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

效果图如下：


2、这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性



Prop 验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

效果输出如下：

100

sdf

1000

{ "a": "a" }

100