Vuejs之Vuejs组件的定义的简单示例

这篇文章主要为大家详细介绍了Vuejs之Vuejs组件的定义的简单示例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

本文参考官方文档整理的一篇更加细致代码更加安全的一篇适合新手阅读学习吧教程。

本篇资料来于官方文档：

http://cn.vuejs.org/guide/components.html

什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

组件的定义

①组件的作用：

【1】扩展HTML元素，封装可重用的代码；

【2】组件是自定义元素，Vuejs的编译器可以为其添加特殊的功能；

【3】某些情况下，组件可以是原生HTML元素的形式，以is的方式扩展。

②写一个标准的组件：

分为以下几步：

【1】挂载组件的地方，需要是Vue实例所渲染的html元素，具体来说，比如上面的<div id=”app”></div>这样的html元素及他的子节点；

【2】定义一个组件，用

代码如下：

var 变量名 = Vue.extend({template:”这里是html的模板内容”})
这样的形式创建，例如：

//定义一个组件 
var btn = Vue.extend({ 
template: "<button>这是一个按钮</button>" 
})

End www.q1010.com

【3】将定义的组件注册到Vue实例上，这会让指定标签，被组件的内容所替代。

如代码：

代码如下：

//注册他到Vue实例上 
Vue.component("add-button", btn); 

End www.q1010.com

具体而言，每一个以下这样的标签（在Vue的根实例范围内的）

代码如下：

<add-button></add-button> 

End www.q1010.com

会被

代码如下：

<button>这是一个按钮</button> 

End www.q1010.com

所替代。

【4】以上方法是全局注册（每个Vue实例的add-button标签都会被我们定义的所替代）；
解决办法是局部注册。

如代码：（这是是设置了template属性，也可以在没有这个属性的时候，在<div id=”app”></div>标签内放置<add-button></add-button>标签

代码如下：

<div id="app"> 
</div> 
<script> 
//定义一个组件 
var btn = Vue.extend({ 
template: "<button>这是一个按钮</button>" 
}) 

Vue.component("add-button", btn); 

//创建根实例，也就是说让Vue对这个根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>" 
}); 
</script> 

End www.q1010.com

③局部注册组件：

简单来说，只对这一个Vue实例生效，具体做法是，在注册那一步，跳过；

然后在声明Vue实例的时候，将添加到components这个属性中（他是一个对象，以KV形式放置）（注意，这个单词多一个s）

如代码：

代码如下：

<div id="app"> 
</div> 
<script> 
//定义一个组件 
var btn = Vue.extend({ 
template: "<button>这是一个按钮</button>" 
}) 
//创建根实例，也就是说让Vue对这个根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": btn 
} 
}); 
</script> 

End www.q1010.com

注：

根据官方教程，这种方法（指局部注册），也适用于其他资源，比如指令、过滤器和过渡。

④步骤简化：

【1】定义组件和注册组件结合起来一步完成：

代码如下：

//定义一个组件 
Vue.component("add-button", { 
template: "<button>这是一个按钮</button>" 
}); 

End www.q1010.com

【2】局部注册时，定义和注册一步完成：

代码如下：

//创建根实例，也就是说让Vue对这个根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮</button>" 
} 
} 
}); 

End www.q1010.com

⑤data属性

直接给组件添加data属性是不可以的（无效）；

原因在于，假如这么干，那么组件的data属性有可能是一个对象，而这个对象也有可能是外部传入的（例如先声明一个对象，然后这个对象作为data的值），可能导致这个组件的所有副本，都共享一个对象（那个外部传入的），这显然是不对的。

因此，data属性应该是一个函数，然后有一个返回值，这个返回值作为data属性的值。

且这个返回值应该是一个全新的对象（即深度复制的，避免多个组件共享一个对象）；

如代码：

代码如下：

var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
} 
} 
}); 

End www.q1010.com

另外，假如这样的话，btn的值是一样的（因为他们实际上还是共享了一个对象）

代码如下：

<div id="app"> 
</div> 
<div id="app2"> 
</div> 
<script> 
var obj = {btn: "123"}; 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮{{btn}}</button>", 
data: function () { 
return obj; 
} 
} 
} 
}); 
obj.btn = "456"; 
var vm2 = new Vue({ 
el: '#app2', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮{{btn}}</button>", 
data: function () { 
return obj; 
} 
} 
} 
}); 
</script> 

End www.q1010.com

注：

el属性用在Vue.extend()中时，也须是一个函数。

⑥is特性：

【1】按照官方教程，一些HTML元素对什么元素可以放在它之中是有限制的；

但实际我自己测试没发现问题，所以不明白。

【2】给个URL吧，如果真出问题了我再回头研究。

http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790

本文来自：http://www.q1010.com/184/2959-0.html

注：关于Vuejs之Vuejs组件的定义的简单示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js