vue.js组件的详解

组件（component）是vue.js的强大功能之一

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

图片来源于网络

 

1.组件的注册语法格式如下：

Vue.component('组件名tagname',配置选项)

 

 

2.注册了组件后就可以调用了

<tagname></tagname>

 

 

3.全局组件和局部组件

 

<div id="app">

<runoob></runoob>

</div>

<script>

// 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' })

// 创建根实例

new Vue({

el: '#app'

})

</script>

---------------这里是分割线-------------------------------

<div id="app">

<runoob></runoob>

</div>

<script>

var Child = { template: '<h1>自定义组件!</h1>' }

// 创建根实例

new Vue({ el: '#app', components: {

// <runoob> 将只在父模板可用 'runoob': Child

} })

</script>

 

4.关于对父组件和子组件的理解，不多比比，上代码

<zujian></zujian>

Vue.component('zujian',{

template:'<h></h>'

})

上面代码中，其实这个<zujian>就相当于下面<h3>的父级组件!是不是很惊讶，就是这么简单

 

再举个例子，传输数据

<zujian message="飞天"></zujian>

 

//我要把上面message的数据：飞天，用到<h>里面去

Vue.component('zujian',{

props:['message']//子组件要用父组件的数据必须要用props声明

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

})

结果：输出字符串：飞天

注意：

//子组件要用父组件的数据必须要用props声明

//子组件要用父组件的数据必须要用props声明

//子组件要用父组件的数据必须要用props声明