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

前端之家收集整理的这篇文章主要介绍了vue 怎么创建组件及组件使用方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是组件?

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

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

这里来说说怎么用组件?怎么样创建自己的组件?:

1)创建自己的组件

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

<Meta charset="UTF-8"> 进一步了解component的话法糖

你知道吗?一个components中可以定义多个组件:

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

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

{{msg}}
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 怎么创建组件及组件使用方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章