Vue组件基础 (重点)
组件实现与步骤
什么是组件化？
- 人面对复杂问题的处理方式：
任何一个人处理信息的逻辑能力都是有限的。
所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆内容。
但是，我们人有一种天生的能力，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现问题也会迎刃而解。新房装修 改水电 地板砖 木工进厂 刷漆 买家具 家电 入住
- 组件化也是类似的思想：
如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么，之后整个页面的管理和维护就会变得非常容易了。
Vue的组件化思想
组件: 页面上的一部分
可以把一个大的网页, 拆分成很多个页面组件进行维护，根据页面组件中的通用功能抽离功能组件
举例！
-
组件化思想的应用：
有了组件化的思想，我们在之后的开发中就要充分的利用它。
尽可能的将页面拆分成一个个小的、可复用的组件。
这样让我们的代码更加方便组织和管理，并且扩展性也很强。
注册组件的基本步骤
组件的使用分成三个步骤：
- 调用
Vue.extend()方法创建组件构造器。 - 调用
Vue.component()方法注册组件。 - 在Vue实例的作用范围内使用组件。
// 1 构造组件
const copyRight = Vue.extend({
data() {
return {
message: '我是组件的信息'
}
},
template: `<div>
{{message}}
<button @click="changeText">改变</button>
</div>
`,
methods: {
changeText() {
console.log(123);
this.message = '更改后的信息'
}
},
})
// 2 注册组件 - 全局注册
Vue.component('copy-right', copyRight)
// 3 使用
<div id="app">
<copy-right></copy-right>
</div>
注册组件步骤解析：
- 这里的步骤都代表什么含义呢？
Vue.extend()：
调用Vue.extend()创建的是一个组件的构造器。 创建一个组件。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。重要的是，组件的内容必须要用一个根元素来进行包裹，且只能有一个根元素。
当多个根元素，会报以下错误： vue.js:634 [Vue warn]: Error compiling template: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 4 | <child-msg></child-msg> 5 | </div> 6 | <div>123</div> | ^^^^^^^^^^^^^^ 7 | | ^^^^ found in ---> <ParentCpn> <Root>Vue.component()：
调用Vue.compoment()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所需要传递两个参数：1、注册组件的标签名。2、组件构造器。
组件必须挂载在某个Vue实例下，否则不会生效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/v2.6.10/vue.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> <!-- 3. 在vue实例中,用闭合标签,写上定义的组件 --> <copy-right></copy-right> </div> <copy-right></copy-right> <script> // 1. 创建组件 const copyright = Vue.extend({ template: ` <div> <div>Copyright © 2020.科技公司 All rights reserved</div> <div>网站备案号 ICP京12324</div> </div> ` }); // 2. 注册组件 参数：1 定义到vue实例中的 组件名。 2 叫做组件变量名 Vue.component('copy-right', copyright); // 全局注册 let app = new Vue({ el: '#app', data() { return { message: '不忘初心 牢记使命' } }, }) </script> </body> </html>
组件的复用
全局组件和局部组件
首先，我们上面写的组件就是全局组件，可以在不同的Vue实例中使用，下面来说一下局部组件：
局部组件：在vue实例中，添加components（复数）属性，可写多个。
let vm = new Vue({
el: '#app',
data() {
return {
}
},
// 局部注册，对象，对象的属性为标签，加引号
components: {
'copy-right': copyRight
},
});
父组件和子组件
- 定义：组件和组件之间存在层级关系，而其中一种非常重要的关系就是父子组件的关系。
语法糖注册组件 v-on @ v-bind ：
- 目的：简写，省略extend，将组件定义成一个对象。
全局注册
Vue.component('my-cpn', {
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈哈</p>
<p>我是内容，嘿嘿嘿嘿嘿</p>
</div>
`
});
局部注册
const app = new Vue({
el: '#app',
data: {
},
components: {
'cpn2': {
template:`
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈哈</p>
<p>我是内容，嘿嘿嘿嘿嘿</p>
</div>
`
}
}
});
组件模板的分离
刚才，我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法。
如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰。
Vue提供两种方案来定义HTML模板内容：
使用
<script>标签 type=“text/x-template”<script type="text/x-template" id="myCom"> <div> <h2>hello everone!</h2> </div> </script>使用
<template>标签<template id="myCom"> <div> <h2>hello everone!</h2> </div> </template>都要赋予
id='xxx'的属性. class 来寻找失败注册:
Vue.component('cpn', { template: '#cpn' });
全局文件的分离
js文件分离，在Html页面引入js
模板分离:
方法一： .vue单文件组件，这是后面的vue工程知识，所以前期不用担心模板怎么去独立到一个文件。
方法二： 建立独立的html，在js中通过ajax请求，异步组件。
组件可以访问Vue实例数据么？
实验:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/v2.6.10/vue.js"></script> </head> <body> <div id="app"> <h1>app里的：{{ message }}</h1> <copy-right></copy-right> </div> <script> const copyright = Vue.extend({ template: ` <div> {{ message }} </div> ` }); Vue.component('copy-right', copyright); // 全局注册 let app = new Vue({ el: '#app', data() { return { message: '不忘初心 牢记使命' } }, }) </script> </body> </html>结论:我们经过测试，组件中不能直接访问Vue实例中的data。
Vue组件拥有属于自己的HTML模板，也有属于自己的数据data,即应该有自己保存数据的地方。
组件数据的存放
组件自己的数据存放在哪里？
- 组件对象也有一个data属性（也可以有methods等属性）
- 只是这个data属性必须是一个函数,Vue实例data可以是对象
- 而且这个函数返回一个对象，对象内部保存着数据
4.28 作业
1 html项目，抽出顶部菜单 底部 两个组件。
2 抽出顶部菜单的搜素框，作为顶部菜单的子组件。
组件通信
通信,即组件将自己的数据（data）进行传递.
在前面将父子组件的时候，我们提到子组件是不能引用父组件或者Vue实例的数据的。
但是在开发中，往往一些数据确实需要从上层传递到下层。
比如在一个页面中，我们从服务器请求到了很多的数据。
其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。比如导航菜单.
这个时候，并不会让子组件再一次发送一个网站请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。
如何进行父子组件间的通信呢？
Vue官方提到：
通过props向子组件传递
通过事件向父组件发送消息
下面的代码中，我们直接将Vue实例当做父组件，并且其中包含子组件来简化代码。在真实开发中，Vue实例和子组件的通信与父组件和子组件的通信过程是一样的。
父子组件通信
父传子:props用法
-
在组件中，使用选项props来声明需要从父级接收到的数据。
props的值有两种方式：
- 方式一：字符串数组，数组中的字符串就是传递时的名称。
- 方式二：对象，对象可以设置传递时的类型，也可以设置默认值。
先看一个简单的props传递案例：
props: ['cmovies', 'cmessage'], -
我们说过，除了数组之外，我们也可以使用对象，当需要对props进行类型验证时，就需要对象写法了。
props: { cmovies: { type: Array, default() { return [] }, }, cmessage: { type: String, default: '12345', } }验证都支持哪些数据类型呢？
String
Number
Boolean
Array
Object
Date
Function
Symbol : ES6 中新添加的数据类型 作用: 给对象 唯一值 为了避免第三方框架的同名属性被覆盖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<my-component :aaa="msg" url="http://www.baidu.com" webname="百度" :userlist="userList" :article="form"
:status=status>
</my-component>
</div>
<template id="childComponent">
<div>
<h1>{{ aaa }}</h1>
<a :href="url">{{webname}}</a>
<ul>
<li v-for="(item,index) in userlist">
{{ item }}
</li>
</ul>
<h4 v-for="(item,key) in article">
{{ item }}
</h4>
{{status}}
<div v-show="status">
显示状态切换
</div>
</div>
</template>
<script>
// 父亲传值给儿子
let vm = new Vue({
el: '#app',
data() {
return {
msg: '我是父组件中的消息',
userList: [
"panzhoudan", "历代美国"
],
form: {
title: '标题',
content: '今天我很开心,因为我要吃大餐,喝大酒,抽大烟',
create_time: '2022-02-30 15:00:33'
},
status: true
}
},
// 局部注册，对象，对象的属性为标签，加引号
components: {
'my-component': {
template: '#childComponent',
// 第一种，用props数组形式
// props: ['aaa', 'url', 'webname'] // 组件中的props 数组字符串接收
props: {
aaa: {
type: String,
default: 'abc'
},
url: {
type: String,
default: 'http://www.sina.com'
},
webname: {
type: String,
default: '新浪'
},
userlist: {
type: Array,
default: function() {
return []
}
},
article: {
type: Object
},
status: {
type: Boolean
}
},
}
},
});
</script>
</body>
</html>
