Vue.js组件

组件可以扩展HTML元素，封装可重用代码。几乎任意类型的应用的界面都可以抽象为一个组件树。

1：全局组件。

指的是在全局定义的组件，注册的语法格式为：Vue.component(tagName,options) 调用时，直接在挂载点下使用<tagName></tagName>即可。

所谓全局，就是将可以在各个挂载点下可用。例：

<div id="app"><runoob></runoob></div>

<div id="app2"><runoob></runoob></div>

<script>

Vue.component("runoob",{template:'<h1>自定义的组件</h1>'});

new Vue({

el:'#app'

});

new Vue({

el:'#app2'

});

</script>

 

2：局部组件

与全局组件对应，局部组件只能在一个挂载点使用，即局部组件所在的根实例中可用。

<div id="app"><runoob></runoob></div>

<script>

var lacal = {

template:'<h1>自定义的组件</h1>'

}

new Vue({

el:'#app',

components{

'runoob': local

}

});

</script>

3：Prop

prop是父组件用来传递数据的自定义属性。

可以简单理解为，组件在配置选项options中定义props属性，props为一个字符串数组，每一个字符串都可以作为组件的一个属性。

父组件该属性中指定的值（一般都是根实例中data中的属性），等同于props属性的数组中对应的值。所以可以在子组件中进行绑定、{{}}取值等操作。

简单理解为：父组件需要通过props把数据传递给子组件，子组件可以显示的调用其中的prop。

这样我们在template属性对应的子组件中就可以使用这些属性。例：

<div id="app">

<child message="hello" message2="world"></child>

</div>

<script>

Vue.component('child',{

props:['message','message2'],

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

});

new Vue({

el:'#app'

});

</script>

这里需要指出，props数组中的值可以理解为是一个实例属性，完全可以使用this.message。这里的this指的是对应的根实例。

4：动态Prop

基本用法同Prop类似，只是不在组件中直接写属性，而是用v-bind:message进行动态绑定。例：

<div id="app">

<input v-model="parentMsg"/>

<br/>

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

</div>

<script>

Vue.component('child',{

props:['message'],

template:'<input v-model="message"/>'

});

new Vue({

el:'#app',

data:{

parentMsg: '默认值'

}

});

</script>

值得注意的是，props中的值，即使被双向绑定，但是只有单向的作用，即改变子组件的值，不影响父组件。

注意，prop中属性的作用范围只在父组件内，超出就会出错。

 

一个循环小例子加深理解：

<div id="app">

<ol>

<todo-item v-for="site in sites" v-bind:item="site"></todo>

</ol>

</div>

<script>

Vue.component('todo-item',{

props:['item'],

template:'<li>{{item.name}}</li>'

});

new Vue({

el:'#app',

data:{

sites:[{name:'aaa'},{name:'bbb'},{name:'ccc'}]

}

});

</script>

 

5：Prop验证

组件可以为pops指定验证请求。这时props的值不是数组，而是对象。暂略。

6：自定义事件。

用来将子组件的数据传递回父组件。具体使用暂略。

 

番外篇：

看一个组件的示例：

Vue.component('button-counter',{

data:funtion(){

return { count:0 }

},

template :'<button v-on:click="count++">you click me {{count}} times.</button>

})

需要知道：组件是可复用的Vue实例，且带有一个名字。这里<button-counter>就是这个组件的名字。在new Vue({})创建的根实例中，可以把组件当作自定义的元素来使用。

作为Vue的实例，因此组件可以接受与new Vue({})相同的参数。比如data、computed、watch、methods、template以及生命周期钩子等等。但是，根实例特有的属性，如el，组件是不可用的。

组件可以被任意次的复用，每次调用都创建一个新的实例。

注意：组件的data必须是一个函数。而不是像根实例那样直接提供一个对象。目的是，可以在函数中维护一个被返回对象的独立的拷贝。此例中返回的是{count:0}对象。因此在复用的组件中，不会相互影响。这一点有一些模糊，先牢记。