组件化的基本使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<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>
<p>我是内容</p>
</div>`
})
// 2.注册组件
Vue.component("my-cpn", cpnC)
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
</body>
</html>
1.什么是组件化
我的个人理解是将一部分代码拿出来,以备别处调用。学过面向对象的都应该知道,重复代码要封装,这个也间是类似的,比如将一个导航栏封装成一个组件,多个页面都要用到导航栏调用即可。组件化开发的两大优势:
- 分类明确,方便管理和维护。
- 解决了重复代码问题,使得代码可以随时复用。
2.组件化开发步骤
- 使用Vue.extend()创建组件构造器对象
- 使用Vue.component()注册组件
- 使用组件
详细代码如下:
<!-- 1.创建组件构造器对象 -->
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
`
})
<!-- 2.注册组件 -->
Vue.component("my-cpn", cpnC)
<!-- 3.使用组件 -->
<my-cpn></my-cpn>
效果图如下:
全局组件和局部组件
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<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.1.注册全局组件(意味着可以在多个Vue的实例下使用)
Vue.component('cpn', cpnC)
// 2.2.注册局部组件
const app = new Vue({
el: "#app",
data: {
message: "你好"
},
components: {
// cpn是使用组件时的标签名
cpn: cpnC
}
})
const app2 = new Vue({
el: "#app2",
data: {
message: "你好"
}
})
</script>
</body>
</html>
1.全局组件和局部组件的区别
- 全局组件可以在所有的Vue实例中使用
- 局部组件只能在当前注册组件的Vue实例中使用
2.怎么注册全局组件和局部组件
- 全局组件用Vue.component()注册,然后可以在所以的Vue实例中使用
- 局部组件在当前组件中使用components注册
上文代码中全局组件和局部组件同时使用。效果图如下:
父组件和子组件
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建第一个组件构造器(子组件)
const cpnC1 = Vue.extend({
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容111</p>
<p>我是内容111</p>
</div>`
})
// 2.创建第二个构造器(父组件)
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容222</p>
<p>我是内容222</p>
<cpn1></cpn1>
</div>`,
components: {
cpn1: cpnC1
}
})
// root组件(可以看作是一个组件))
const app = new Vue({
el: "#app",
data: {
message: "你好"
},
components: {
cpn2: cpnC2
}
})
</script>
</body>
</html>
1.父组件和子组件的关系
- 调用者是父组件
- 被调用者是子组件
2.上文代码关系
- <cpn1></cpn1>此刻没有在root里面注册,所有不能使用
- Vue实例压根不知道有cpn1的存在,cpn2解析完成之后,才把整体交给vue实例
- 类似俄罗斯套娃
效果图如下:
组件模版的分离写法
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn2></cpn2>
</div>
<!-- 1.通过script标签来定义template,但是类型必须是type="text/x-template" -->
<script type="text/x-template" id="cpn">
<div>
<h2>我是通过script标签定义的</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
</script>
<!-- 2.通过template标签即可,同样只要使用id绑定 -->
<template id="cpn2">
<div>
<h2>我是通过template标签定义的</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 1.注册全局组件
Vue.component("cpn", {
template: "#cpn" })
Vue.component("cpn2", {
template: "#cpn2" })
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
</body>
</html>
1.什么是模版分离
我酝酿了半个月好不容易想写几行代码,你还这么折磨我,不是我不想学,是老天不让我学…解决办法就是我们可以将模版template写到html里面去,而代码效果是这样的,好像是好看了一点。
2.怎么使用模版
每个组件都有一个template属性,只要绑定id即可如你所愿。
Vue.component("cpn", {
template: "#cpn" })
Vue.component("cpn2", {
template: "#cpn2" })
3.两种模版任你选择
- 通过script标签定义template
- 直接使用template标签
组件中的数据存放问题
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<!-- 组件不可以访问vue实例中的变量 -->
<template id="cpn">
<div>
<h2>{
{title}}</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 1.注册一个全局组件
Vue.component("cpn", {
template: "#cpn",
data() {
return {
title: "我是定义在组件中的"
}
}
})
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
</body>
</html>
1.组件数据关系
子组件和父组件是两个单独的个体,父组件有自己的data变量,同样子组件也有自己的data变量,子组件的data变量放在和template同一级下面即可,注意子组件的变量父组件不可以直接使用,同理父组件的变量子组件也不可以直接使用。
Vue.component("cpn", {
template: "#cpn",
data() {
return {
title: "我是定义在组件中的"
}
}
})
第一次记录自己的学习笔记,如果您发现问题,欢迎指点。