什么是组件?
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。
我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢?
这里来说说怎么用组件?怎么样创建自己的组件?:
1)创建自己的组件
通过vue.extend("template")
;通过vue构造器去拓展一个模板,然后注册,最后使用。
rush:js;">
<Meta charset="UTF-8">
进一步了解component的话法糖
你知道吗?一个components中可以定义多个组件:
将html,写入components是不是觉得很low呢?当template的内容太多了,是不是不堪入目呢?那我们来使用一下vue组件的语法糖吧(不知道为啥叫这个名)
值得提醒你的事:组件中的data属性要定义成一个函数,返回一个对象,
rush:js;">
{{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中属性值,定义时是驼峰,使用时就要变为中划线
rush:js;">
const son={
template:`
parent:
son:
`,props:{sonCounter:Number},};
var app=new Vue({
el:'#app',data:{
counter:0,components:{
son
}
});
最后一个提醒:组件的创建要在,vue实例化之前。
总结
以上所述是小编给大家介绍的vue 怎么创建组件及组件使用方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。