vue 怎么创建组件及组件使用方法

发布时间：2020-12-17 02:51:41 所属栏目：百科来源：网络整理

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

什么是组件？

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

我知道vue中核心就是组件，但是组件是什么呢？组件有什么用呢？

这里来说说怎么用组件？怎么样创建自己的组件？：

1）创建自己的组件

通过vue.extend("template");通过vue构造器去拓展一个模板，然后注册，最后使用。

进一步了解component的话法糖

你知道吗？一个components中可以定义多个组件：

将html,写入components是不是觉得很low呢？当template的内容太多了，是不是不堪入目呢？那我们来使用一下vue组件的语法糖吧（不知道为啥叫这个名）

值得提醒你的事：组件中的data属性要定义成一个函数，返回一个对象，

var vm=new Vue({ el:"#app",components:{ "parent-component-script":{ template:'#myComponent',data(){return{msg:'这里是script'};},"parent-component-tem":{ template:'#myCom',data(){return{msg:'这里是template'} } },});

你也可以更狠一点：的创建方式

值得注意的是：组件中的props中属性值，定义时是驼峰，使用时就要变为中划线

parent:

const son={ template:`

son:

`,props:{sonCounter:Number},}; var app=new Vue({ el:'#app',data:{ counter:0,components:{ son } });

最后一个提醒：组件的创建要在，vue实例化之前。

总结

以上所述是小编给大家介绍的vue 怎么创建组件及组件使用方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!