vue 组件化
一、vue组件化的基本使用
<div id="app">
<!-- 3.使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
})
// 2.注册组件
Vue.component('my-cpn',cpnC)
const app = new Vue({
el:"#app",
data:{
message:'你好啊'
}
})
</script>
步骤:
- 1.创建组件
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
})
- 2.注册组件
第一个值就是在app 中展示的组件名称
第二个值就是创建组件是 的名称(const 后 面的那个词)
Vue.component('my-cpn',cpnC)
- 3.使用组件
把 注册组件时候的那个名称 (第一个值) 在app中 以标签的形式展示 (这就是使用组件)
<my-cpn></my-cpn>
二、全局组件与局部组件
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件内构造器(全局)
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>
`
})
// 2.注册组件(全局组件)
// Vue.component('cpn',cpnC)
const app = new Vue({
el:"#app",
data:{
message:'你好呀'
},
// 局部组件
components:{
//使用组件时的标签名
cpn:cpnC
}
})
const app2 = new Vue({
el:"#app2"
})
</script>
本质 :全局组件 :在哪里都可以使用 局部组件:在哪里注册的只能在哪里使用
步骤:
- 1全局组件的注册 与 vue是同级的
Vue.component('cpn',cpnC)
2.局部组件 注册在 vue实例中 的 component 属性中 与 el 、 data、同级
components:{
//使用组件时的标签名
cpn:cpnC
}
三、父组件与子组件
<div id="app">
<cpn2></cpn2>
<cpn1></cpn1>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建第一个组件(子)
const cpnC1 = Vue.extend({
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容111111</p>
</div>
`,
});
// 2.创建第二个组件(父)
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容222222</p>
<cpn1></cpn1>
</div>
`,
components: {
cpn1: cpnC1,
},
});
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
},
components: {
cpn2: cpnC2,
cpn1: cpnC1,
},
});
</script>
步骤:
1.先创建2个组件
2.在vue实例中注册为局部组件
3.在父组件中导入子组件就是 组件1
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容222222</p>
<cpn1></cpn1>
</div>
`,
components: {
cpn1: cpnC1,
},
});
4.在使用 父组件 (组件2)的时候 子组件也会一起显示
四、组件的语法糖
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建第一个组件(子)
// const cpnC1 = Vue.extend();
// 2.组件注册 (全局组件语法糖)
Vue.component("cpn1", {
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容111111</p>
</div>
`,
});
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
},
//注册局部组件的语法糖
components: {
'cpn2': {
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容222222</p>
</div>
`,
},
},
});
</script>
本质:省略创建的那一步 注册的时候把 模板加进去
1.全局组件
Vue.component("cpn1", {
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容111111</p>
</div>
`,
});
2.局部组件
components: {
'cpn2': {
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容222222</p>
</div>
`,
},
},
五、组件模板的分离写法
<div id="app">
<cpn1></cpn1>
</div>
<!-- 1. script 类型是 text/x-template-->
<!-- <script type="text/x-template" id="cpn">
<div>
<h2>我是标题1</h2>
<p>我是内容111111</p>
</div>
</script> -->
<!-- 2.template 标签 -->
<template id="cpn">
<div>
<h2>我是标题1</h2>
<p>我是内容111111</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 1.创建第一个组件(子)
// const cpnC1 = Vue.extend();
// 2.组件注册 (全局组件语法糖)
Vue.component("cpn1", {
template:"#cpn"
});
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
},
//注册局部组件的语法糖
components: {
},
});
</script>
步骤:
1.新建一个 template 标签 绑定一个id
<template id="cpn">
<div>
<h2>我是标题1</h2>
<p>我是内容111111</p>
</div>
</template>
2.注册全局组件的语法糖 分离
// 2.组件注册 (全局组件语法糖)
Vue.component("cpn1", {
template:"#cpn"
});
3.注册局部组件的语法糖 分离
//注册局部组件的语法糖
components: {
cpn1:{template:"#cpn"}
},
六、组件中的数据存放问题
<div id="app">
<cpn></cpn>
</div>
<!-- 1. script 类型是 text/x-template-->
<!-- <script type="text/x-template" id="cpn">
<div>
<h2>我是标题1</h2>
<p>我是内容111111</p>
</div>
</script> -->
<!-- 2.template 标签 -->
<template id="cpn">
<div>
<h2>{{title}}</h2>
<p>我是内容111111</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 1.创建第一个组件(子)
// const cpnC1 = Vue.extend();
// 2.组件注册 (全局组件语法糖)
Vue.component("cpn", {
template:"#cpn",
//数据存放在函数中
data(){
return {
title:'abc'
}
}
});
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
},
//注册局部组件的语法糖
components: {
// 'cpn':{ template:"#cpn"}
},
});
</script>
说明:
1.数据一般存放在函数中
// 2.组件注册 (全局组件语法糖)
Vue.component("cpn", {
template:"#cpn",
//数据存放在函数中
data(){
return {
title:'abc'
}
}
});