Component 初识组件

Component 初识组件

一、全局化注册组件

全局化就是在构造器的外部用Vue.component来注册，我们注册现在就注册一个<jspang></jspang>的组件来体验一下。

二、局部注册组件

局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

（从代码中你可以看出局部注册其实就是写在构造器里，但是你需要注意的是，构造器里的components 是加s的，而全局注册是不加s的。）

三、组件和指令的区别

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。

Component 组件props 属性设置

一、定义属性并获取属性值

 

定义属性我们需要用props选项，加上数组形式的属性名称，例如：props:[‘here’]。在组件的模板里读出属性值只需要用插值的形式，例如{{ here }}.

上面的代码定义了panda的组件，并用props设置了here的属性值，在here属性值里传递了China给组件。最后输出的结果是红色字体的Panda from China.

 

 

二、属性中带’-‘的处理方式

我们在写属性时经常会加入’-‘来进行分词，比如：<panda   from-here=”China”></panda>，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。

二、在构造器里向组件中传值

(把构造器中data的值传递给组件，我们只要进行绑定就可以了。就是我们第一季学的v-bind:xxx.)

Component 父子组件关系

在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子组件关系。

一、构造器外部写局部注册组件

Component 标签

<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

1. 我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.

  var componentA={ template:’<div>I'm componentA</div>’ }

  var componentB={ template:’<div>I'm componentB</div>’ }

var componentC={ template:’<div>I'm componentC</div>’ } 

1. 我们在构造器的components选项里加入这三个组件。

components:{

    "componentA":componentA,

    "componentB":componentB,

    "componentC":componentC,

}

1. 我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件。

<component v-bind:is="who"></component>