</div>
<!-- 模板分离 方法一、 -->
<script type="text/x-template" id="cpn5">
<div>
<h1>标题5</h1>
<p>内容5, 我是哈哈哈</p>
<p>内容5:我是呵呵呵</p>
</div>
</script>
<!-- 模板分离 方法二 -->
<template id="cpn6">
<div>
<h1>标题6</h1>
<h1>{{title}}</h1>
<p>内容6,我是哈哈哈</p>
<p>内容6我是呵呵呵</p>
</div>
</template>
<script>
// 1.创建组件化
// 子组件
const cpnC = Vue.extend({
template: `
<div>
<h1>标题</h1>
<p>内容, 我是哈哈哈</p>
<p>内容:我是呵呵呵</p>
</div>`
});
// 1.创建组件化
// 父组件
const cpnC2 = Vue.extend({
template: `
<div>
<h1>标题2</h1>
<p>内容2, 我是哈哈哈</p>
<p>内容2:我是呵呵呵</p>
<cpn1></cpn1>
</div>`,
components: {
cpn1: cpnC
}
});
// 全局组件:可以在所有的实例里面使用
// 2.注册组件化,并且定义组件标签名称
// vue.component('定义使用名称','创建名称')
Vue.component('my-cpn', cpnC)
// 全局 注册组件的语法糖写法
Vue.component('cpn3', {
template: `
<div>
<h1>标题3</h1>
<p>内容3, 我是哈哈哈</p>
<p>内容3:我是呵呵呵</p>
</div>`
})
// 模板分离 方法一
Vue.component('cpn5', {
template: `#cpn5`
})
// 模板分离 方法二
Vue.component('cpn6', {
template: '#cpn6',
data() {
return {
title: 'abc'
}
}
})
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
computed: {
},
// 局部组件:只能在控制的vue实例里面使用
components: {
cpn: cpnC,
cpn2: cpnC2,
cpn4: {
template: `
<div>
<h1>标题4</h1>
<p>内容4, 我是哈哈哈</p>
<p>内容4:我是呵呵呵</p>
</div>`
},
},
})
</script>
如何在vue中实现组件化开发
最新推荐文章于 2024-07-16 15:41:21 发布