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>"
})
【3】将定义的组件注册到Vue实例上，这会让指定标签，被组件的内容所替代。
如代码：
//注册他到Vue实例上
Vue.component("add-button", btn);
具体而言，每一个以下这样的标签（在Vue的根实例范围内的）
<add-button></add-button>
会被
<button>这是一个按钮</button>
所替代。
【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>
③局部注册组件：
简单来说，只对这一个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>
注：
根据官方教程，这种方法（指局部注册），也适用于其他资源，比如指令、过滤器和过渡。
④步骤简化：
【1】定义组件和注册组件结合起来一步完成：
//定义一个组件
Vue.component("add-button", {
template: "<button>这是一个按钮</button>"
});
【2】局部注册时，定义和注册一步完成：
//创建根实例，也就是说让Vue对这个根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮</button>"
}
}
});
⑤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"};
}
}
}
});
另外，假如这样的话，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>
注：
el属性用在Vue.extend()中时，也须是一个函数。
⑥is特性：
【1】按照官方教程，一些HTML元素对什么元素可以放在它之中是有限制的；
但实际我自己测试没发现问题，所以不明白。
【2】给个URL吧，如果真出问题了我再回头研究。
http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790
以上所述是小编给大家介绍的Vuejs第八篇之Vuejs组件的定义实例解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在前后端分离的项目中经常使用到Vue+axios通过FormData的方式向后端发送表单数据,下面就来介绍一下如何实现,感兴趣的可以了解一下2023-09-09
今天小编就为大家分享一篇解决vue A对象赋值给B对象,修改B属性会影响到A的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了vue+iview写个弹框的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vue使用refs获取嵌套组件中的值过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家详细介绍了如何利用Vue实现多点涂鸦效果，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以跟随小编一起学习一下2023-03-03
这篇文章主要介绍了有关vue 组件切换,动态组件,组件缓存，在组件化开发模式下，我们会把整个项目拆分成很多组件，然后按照合理的方式组织起来,达到预期效果，下面来看看文章的详细内容2021-11-11
最近写代码遇到一问题祖先级别的组件怎么操作孙子的儿子的组件方法，在网上搜了半天都是父子传参，父子操作，晕晕乎乎的想起了bus，接下来通过本文给大家介绍vue 祖先组件操作后代组件方法,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了部署vue+Springboot前后端分离项目的步骤实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了Vue检测屏幕变化来改变不同的charts样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单，需要从后台获取七牛token上传图片到七牛，具体示例代码大家跟随小编一起学习吧2018-10-10
最新评论