<vue 组件 1、组件化基本使用>
代码结构
组件就是将复杂的功能拆分成简单的块，拆分后的块可以被多处使用。
组件的使用分成三个步骤：
1、创建组件构造器 Vue.extend()
2、注册组件 Vue.component()
3、使用组件 <my-cpn></my-cpn>
一、 01-组件化的基本使用
1、效果
2、代码
01-组件化的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--3.使用组件-->
<my-cpn></my-cpn>
<div>
<div>
<my-cpn></my-cpn>
</div>
</div>
</div>
<my-cpn></my-cpn>
<script src="vue.js"></script>
<script>
// 1.创建组件构造器对象
let cpnC = Vue.extend({
template: `
<div>
<h2>组件的标题</h2>
<p>--------组件的内容-----------</p>
</div>`
})
// 2.注册组件
Vue.component('my-cpn', cpnC)
let app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
</html>
二、 02-全局组件和局部组件
1、 效果
（1）Vue.component('cpn', cpnC) 这样注册是全局组件
（2） 这样注册就是局部组件
let app = new Vue({
el: '#app',
components: {
// cpn使用组件时的标签名
cpn: cpnC
}
})
2、代码
02-全局组件和局部组件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
</div>
<script src="vue.js"></script>
<script>
// 1.创建组件构造器
const cpnC = Vue.extend({
template: `
<div>
<h2>组件的标题</h2>
<p>--------组件的内容-----------</p>
</div>
`
})
// 2.注册组件(全局组件, 意味着可以在多个Vue的实例下面使用)
// Vue.component('cpn', cpnC)
// 疑问: 怎么注册的组件才是局部组件了?
let app = new Vue({
el: '#app',
components: {
// cpn使用组件时的标签名
cpn: cpnC
}
})
const app2 = new Vue({
el: '#app2'
})
</script>
</body>
</html>
三、03-父组件和子组件
1、效果
2、代码
03-父组件和子组件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script src="vue.js"></script>
<script>
// 1.创建第一个组件构造器(子组件)
let cpnC1 = Vue.extend({
template: `
<div>
<h2>子组件的标题</h2>
<p>--------组件的内容-----------</p>
</div>
`
})
// 2.创建第二个组件构造器(父组件)
let cpnC2 = Vue.extend({
template: `
<div>
<h2>父组件的标题</h2>
<p>--------组件的内容-----------</p>
<cpn1></cpn1>
</div>
`,
components: {
cpn1: cpnC1
}
})
// root组件
let app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: {
cpn2: cpnC2
}
})
</script>
</body>
</html>
四、04-组件模板的分离写法
1、效果
这个效果不太重要，重要的是代码的分离写法
2、代码
04-组件模板的分离写法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>组件的标题</h2>
<p>--------组件的内容-----------</p>
</div>
</template>
<script src="vue.js"></script>
<script>
// 1.注册一个全局组件
Vue.component('cpn', {
template: '#cpn'
})
const app = new Vue({
el: '#app'
})
</script>
</body>
</html>
五、05-组件中的数据存放问题
1、效果
2、代码
05-组件中的数据存放问题.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{title}}</h2>
<cpn></cpn>
</div>
<!--2.template标签-->
<template id="cpn">
<div>
<h2>{{title}}</h2>
</div>
</template>
<script src="vue.js"></script>
<script>
// 1.注册一个全局组件
Vue.component('cpn', {
template: '#cpn',
data() {
return {
title: '我是组件中的标题'
}
}
})
let app = new Vue({
el: '#app',
data: {
message: '你好',
title: '我是标题'
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号