创建组件的方法
2019-07-12 本文已影响0人
闲人追风落水
创建组件的三种方式
//第一种方式
//1.0 使用Vue.extend 来创建全局的Vue组件
var com1 = Vue.extend({
template: '<h3> 这是使用Vue.extend创建的组件 </h3>'
})
//1.1 使用 Vue.component('组件的名称',创建出来的组件模板对象)
Vue.component('mycom1',com1)
//第二种方式
//合并成一个
Vue.component('mycom1',Vue.extend({
template: '<h3> 这是使用Vue.extend创建的组件 </h3>'
}))
//优化
Vue.component('mycom1',{
template: '<h3> 这是使用Vue.extend创建的组件 </h3>'
})
//第三种方式
//外部定义组件
<html>
<template id="temp">
<div>
<h1>xxxx</h1>
</div>
</template>
</html>
<script>
Vue.component('mycom1',{
template: '#temp'
})
</script>
//这里需要注意模板 template增加标签的时候需要包含在一个唯一的根节点中
类似于这样的 template: '<div><h3> 这是使用Vue.extend创建的组件 </h3><span>hahahha</span></div>'
Vue.extend 的介绍
