Vue 创建组件的方式

时间:2022-12-20 12:05:11

 

Vue 创建组件的方式

版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动。 https://blog.csdn.net/weixin_42218847/article/details/81477836

方式一

 <!--1.1使用Vue.extend来创建全局的Vue组件--> var tem1 = Vue.extend({ template:'<h3>这是使用 Vue.extend 创建的组件</h3>' //指定组件要展示的HTML结构 }); <!--1.2使用Vue.component('组件名称',创建出来的组件模板对象)--> Vue.component('myTem1',tem1); /* <!--注意--> 使用 Vue.component() 定义全局组件的时候, 组件名称使用 驼峰命名,则在引用组件的时候,需要把大写改为小写,并且用 '-'将单词连接 组件名称不使用驼峰命名,则直接拿名称来使用即可 */ <!--组合方式--> Vue.component('myTem1',Vue.extend({ template : '<h3>这是使用 Vue.extend 创建的组件</h3>' })) <div id="app"> <!-- 如果要使用组件,直接把组件的名称以 HTML 标签的形式,引入到页面中--> <my-tem1> </my-tem1> </div>

方式二

直接使用Vue.component()

   Vue.component('mycom2',{ template : '<h3>这是使用 Vue.component 创建的组件</h3>' })

但是这样写会有一个问题:

<!--在h3标签后紧接一个span标签的话就会出问题了--> <h3>这是使用 Vue.component 创建的组件</h3> <span>123</span>

Vue 创建组件的方式

这个问题是在 组件template属性指向的模板内容,必须有且只能有唯一的一个根元素
所以修改代码如下:

Vue.component('mycom2',{
        template : 
            '<div> <h3>这是使用 Vue.component 创建的组件</h3> <span>123</span> </div>' })

运行结果如下:

Vue 创建组件的方式

不过这种方式也有一个瑕疵,就是template 属性的值是HTML标签,而在软件中,并没有智能提示,容易出错,若使用这种方式,需要仔细,避免出错

方式三

<!--1.定义组件:--> Vue.component('mycom3',{ template : '#tem1' }); <!--2.在被控制的 #app 外面使用 template 元素,定义组建的HTML模板结构--> <div id="app"> <!--3. 引用组件 --> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>这是 template 元素</h1> <span>这种方式好用</span> </div> </template>

运行结果如下:

Vue 创建组件的方式

这是Vue创建组件(全局)的3种方式,其实相差不多,希望对大家有所帮助

Vue 创建组件的方式
[Vue chuàngjiàn zǔjiàn de fāngshì]
Vue 创建组件的方式
How Vue creates components