- it技术
- VUE组件
VUE组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子
（一）注册组件步骤
1、创建组件构造器对象
const cpmC
= Vue
.extend({
template
: `
<div>
<h2>我是标题</h2>
<p>dsfdsaf</p>
<p>dsafaghytuyt</p>
</div>`
})
2、注册组件
Vue
.component('my-cpn',cpmC
)
const app
= new Vue({
el
: '#app',
components
:{
cpn
:cpmC
},
methods
: {
},
})
3、使用组件
<div id
="app">
<!-- 3.使用组件
-->
<my
-cpn
></my
-cpn
>
<cpn
></cpn
>
</div
>
（二）父组件子组件使用
<body
>
<div id
="app">
<cpn2
></cpn2
>
</div
>
</body
>
<script
>
const dpnC1
= Vue
.extend({
template
: `
<div>
<h2>我是标题1</h2>
<p>dsgsfg</p>
<p>gfhghfd</p>
</div>
`
})
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
},
methods
: {
},
components
: {
"cpn2": {
template
: `
<div>
<h2>我是标题2</h2>
<p>dsgsfg</p>
<p>gfhghfd</p>
<cpn1></cpn1>
</div>
`,
components
: {
cpn1
: dpnC1
}
}
}
})
</script
>
（三）组件模板分离
<body
>
<div id
="app">
<my
-cpn
></my
-cpn
>
<my
-cpn2
></my
-cpn2
>
</div
>
<!-- 1.script标签 类型：text
/x
-template
-->
<script type
="text/x-template" id
="myCpn">
<div
>
<h2
>我是标题
</h2
>
<p
>dsfdsaf
</p
>
<p
>dsafaghytuyt
</p
>
</div
>
</script
>
<!-- 2.template标签
-->
<template id
="cpn">
<div
>
<h2
>{{title
}}</h2
>
<p
>dsfdsaf
</p
>
<p
>dsafaghytuyt
</p
>
</div
>
</template
>
</body
>
<script src
="../js/vue.js"></script
>
<script
>
Vue
.component('my-cpn', {
template
: "#myCpn",
})
Vue
.component('my-cpn2', {
template
: "#cpn",
data() {
return {
title
: "我是标题2"
}
}
})
const app
= new Vue({
el
: '#app',
data
: {
message
: 'as',
},
methods
: {
},
})
</script
>
