1.组件的注册
- 创建组件构造器? ? ? ? ? ? ? ? ? ?Vue.extend()
- 注册组件? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Vue.component()
- 使用组件
<body>
<div id="app">
<!-- 3.使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="../vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，呵呵呵呵</p>
<p>我是内容，哈哈哈哈</p>
</div>
`
})
// 2.注册组件
Vue.component('my-cpn', cpnC)
const app = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
2.全局组件与局部组件?
如上个例子，所注册的组件是全局组件，意味着可以在多个Vue的实例下面使用。
如何注册一个局部组件？
components属性，如下：
const app = new Vue({
el: '#app',
data: {
},
components: {
cpn2: cpnC2
}
})
3.父组件和子组件
?父组件包含子组件
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script src="../vue.js"></script>
<script>
// 1.创建一个组件构造器（子组件）
const cpnC1 = Vue.extend({
template: `<div>
<h2>我是标题</h2>
<p>我是内容，我是子组件</p>
</div>`
})
// 2.创建第二个组件构造器（父组件）
const cpnC2 = Vue.extend({
template: `<div>
<h2>我是标题</h2>
<p>我是内容，我是父组件</p>
<cpn1></cpn1>
</div>`,
components: {
cpn1: cpnC1
}
})
const app = new Vue({
el: '#app',
data: {
},
components: {
cpn2: cpnC2,
cpn1: cpnC1
}
})
</script>
</body>
?4.语法糖注册组件
? ? ? ? ? 组件模板的分离写法
<template?id="cpn">此处组件的标签</template>
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>
{{title}}
</h2>
<p>我是内容，哈哈哈哈</p>
</div>
</template>
<script>
//1.注册一个全局组件
Vue.component('cpn', {
template: '#cpn', //分离写法
data() {
return {
title: 'abc'
}
}
})
const app = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
|