组件是vue.js中非常重要的一部分，打个比方，会用组件得人喝着茶就写完的页面，不会用的代码打到手抽筋也未必完的成。
首先何为组件
组件可以封装重用的代码，扩展HTML元素，更高的说组件是自定义元素。
组件化的html
写入vue.js的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="./../vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
})
</script>
</body>
</html>然后实例new中加入components 组件
components:{ child } //注册局部组件在id=app中添加<child></child>
实例化一个child对象，里边添加模板组件template，然后添加内容为
template:"<div class="child">children</div>" //这里的模板会替代child这样我们就可以在后台发现多出来一个class名为child的标签，页面内容为children
可我们想组建出多个该怎么弄呢？
只需要在我们在components组件中加入childSibling
components:{ child，childSibling }然后如同上边一样实例一个childSibling对象那样，然后在id="app"中再添加一个<child-sibling>自定义标签，这样我们就可以得到两个标签了。这里要注意这里的命名转换
创建子组件
首先，我们应实例化一个子组件son
var son = {
template:"<div>这是子元素</div>"
}然后我们要在目标父组件中添加components组件，里边写入这个son，再然后在template中添加<son></son>
template:"<div><son></son</div>"这样我们就完成了html的组件化，当然实际应用不可能这么简单，不过都是以此类推的。
从父元素中获取数据
如果我们用常规的方法获取data里数据添加到模板里会报错，这时就用到props，这个属性是用来声明子组件预期的数据，我们可以通过这个方法来得到data里的数据。
声明子组件预期的数据
props:["预期数据"]绑定data数据,假设父元素为<ele>
data：{
数据："111"
}<ele v-bind 预期数据="数据" ></ele>这样我们在组件中添加预期数据就可得到data里的数据内容了
还有很多这样的方法可以参照官网进行操作https://cn.vuejs.org/v2/guide...
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。