目录
1. 组件机制
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。组件注册的时候需要为该组件指定各种参数。
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
1.1 组件的特点
- 组件可以进行任意次数的复用。
- 组件的data必须是一个函数，确保每个实例可以维护一份被返回对象的独立的拷贝，也就是任何一个组件的改变不会影响到其他组件。
1.2 代码说明
let component = {
data() {
return { count: 0 }
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
}2.组件注册
要想进行组件使用得先进行组件注册
2.1 全局注册和局部注册定义
-
全局注册：可以使用Vue.component(tagName, options) 注册一个全局组件, 注册之后可以用在任何新创建的 Vue 根实例的模板中 Vue.component('my-component-name',component)
-
局部注册：局部注册的组件只能在当前组件中使用
ps:全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
2.2 代码说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<my-com></my-com>
<my-com2></my-com2>
</div>
<script>
// 1.组件的定义
let component1 = {
data() {
return {
msg: '我是子组件1'
}
},
template: `
<div>
<h3>{{msg}}</h3>
</div>
`
}
let component2 = {
data() {
return {
msg: '我是子组件2'
}
},
template: `
<div>
<h3>{{msg}}</h3>
<my-com></my-com>
</div>
`
}
// 2.组件注册
// 2.1全局注册
Vue.component('my-com', component1)
let vm = new Vue({
el: "#app",
data: {},
methods: {},
created() { },
// 2.2局部注册
components: {
'my-com2': component2
}
})
</script>
</body>
</html>3. 组件交互/通信
组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
3.1 子组件内使用父组件数据 （父传子）
1. 父组件传递数据给子组件 （可以传递静态属性 动态属性 ）
<my-com title='' :msg='msg' attr-a=''>
2. 子组件接收并处理数据
{
props:['title','msg','attrA],
template:``
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3.组件使用 -->
<my-com :num='1' :attr1='attr1'></my-com>
</div>
<script>
// 1.组件定义
let component1 = {
// props: ['num', 'attr1', 'parentData'],
props: {
num: [Number, String],
attr1: {
type: String,
// required: true,
default: '默认值',
validator(value) {
return value.length >= 3
}
},
parentData: {
type: Object,
default() {
return {
username: 'ls',
age: 21
}
}
}
},
data() {
return {
msg: '子组件1'
}
},
template: `
<div>
<h3>{{msg}}</h3>
<h2>父组件传递过来的数据：{{attr1}}-{{parentData}}-{{num}}</h2>
</div>
`
}
let vm = new Vue({
el: "#app",
data: {
attr1: '我是父组件数据',
attr2: {
username: 'zs',
age: 15
}
},
methods: {},
created() { },
// 2.局部注册组件
components: {
'my-com': component1
}
})
</script>
</body>
</html>3.2 父组件内使用子组件的数据（子传父）
1. 事件发射 自定义事件
2. 在子组件内发射 在父组件内接受
3. 子组件发射时机
(1) 手动按钮发送
(2) 监听子组件内数据变化，然后发射
在子组件内监听comMsg的变化，this.$emit('',this.comMsg)
父组件的事件处理程序调用，可以更改父组件数据模型中的数据，同步反映到父组件视图中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.box {
width: 100px;
height: 50px;
border: 1px solid rgba(222, 159, 224, 0.5);
}
</style>
</head>
<body>
<div id="app">
<h2>父组件</h2>
<div class="box">
{{parentData}}
</div>
<!-- 3.组件使用 -->
<my-com @child-event='parentHandler'>成功按钮</my-com>
</div>
<script>
// 1.组件定义
let component1 = {
data() {
return {
childData: '我是子组件数据'
}
},
methods: {
toEmitHandler() {
// $emit方法可以向上发送事件，并且可以携带数据
this.$emit('child-event', this.childData)
}
},
template: `
<div>
<h3>子组件</h3>
<button @click='toEmitHandler'>发送事件</button>
<button>
<slot></slot>
</button>
</div>
`
}
let vm = new Vue({
el: "#app",
data: {
parentData: 'windowsXP'
},
methods: {
parentHandler(data) {
console.log('知道了', data);
// 修改父组件数据，由父组件自己来决定
this.parentData = data
}
},
created() { },
// 2.局部注册组件
components: {
'my-com': component1
}
})
</script>
</body>
</html>4. 组件传值
4.1 组件传值
父组件通过属性绑定的方式将参数传递给子组件，子组件通过props声明期望从父组件那里获取的参数。camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
1. 父组件给子组件数据的时候，子组件可以定义数据类型：
静态传参：不加冒号，传字符串
动态传参：加冒号，传number、boolean、object、数组类型的值，变量
2. 希望每个prop都有指定的值类型。这时，你可以以对象形式列出prop，这些property的名称和值分别是prop各自的名称和类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
prop验证
我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: { type: String, required: true },
// 带有默认值的数字
propD: { type: Number, default: 100 }
})
4.2 单向数据流（数据更改的方向）
1.父组件可以改给子组件的数据
（父改子可以）
2.子组件不可以改父组件的数据
（子改父不行）
修改父组件的msg 子组件的msg跟着修改但是反过来不行
vm.msg='hello vue' 观察子组件的变化