组件基础

简介

组件是 Vue.js 中最重要也是最有特色的功能之一，不仅仅是可以拓展的 html 元素，还是封装可用的代码，同时也是 Vue 实例。
它提供了一种抽象，让我们可以使用独立可复用的小组件来构建应用，任意类型的应用都可以抽象成一个组件树。

组件基础

为什么使用组件

1. 提高开发效率，一次开发多次复用
2. 简化调试步骤
3. 提升项目的可维护性和拓展性（模块化）

4. 便于多人协作

   注册组件

   全局注册

   ```html

<a name="IyUeK"></a>
### 局部注册
```html
<!--html-->
<div id="app">
      <!--渲染组件-->
    <last-name></last-name>
</div>
<!--引入 cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    // vue 实例
    let vue = new Vue({
        el:'#app',
        data:{

        },
    //注册/声明组件
    //在与 data 平级下添加 components 对象，对象里写组件名，后面接对象里面写具体 html
        components:{
            'last-name':{
                template:'<div style="color: #0086B3">我是最后一个局部注册的组件</div>'
            }
        }
    })
</script>

全局 VS 局部

全局注册
缺点：全局注册组件，开销比较大，权限也大，容错率低
优点：所有的 Vue 实例都可以使用
所以日常开发中，我们尽量使用局部注册

解析 DOM 模板时的 BUG

因为一些 HTML 元素对于哪些元素可以出现在其内部是有严格限制的，比如

下面要接
• 、下面接、下面接 等等，遇到诸如此类的标签不会渲染我们的组件，也就是在table中使用组件是无效的，此时可以使用is属性来挂载组件示例 //什么都不会显示 <table> <first-name></first-name> </table> 解决方案 <table> <tr is="first-name"></tr> </table> 小技巧 推荐使用小写字母加­进行命名（必须） child, first-name命名组件实际上在 Vue 中，-后面的第一个字母会被转换成大写比如fist-name === firstName2. template中的内容必须被一个DOM元素包括 ，也可以嵌套DOM 元素可以是 也可以是，只要是 DOM 元素就可以。如果没有 DOM 元素包裹，就会报错3. 在组件的定义中，除了template之外的其他选项—data,computed,methods components:{ 'last-name':{ template:'<div style="color: #0086B3">我是最后一个局部注册的组件</div>', data(){ return { } }, computed:{ }, methods:{ } } data必须是一个方法, return 返回一个对象 组件通信通过上面的内容，我们对组件有了基本的认识。你以为组件只是单纯渲染页面的组装吗？当然不，组件中最重要的功能就是通信。下面我们揭开组件通信的面纱。 父=>子传值 静态数据传值父子传值意思就是，爸爸打电话给儿子，说要他回家吃饭。那么他要分两步进行：1.拨通电话号码2.通话内容：回家吃饭！ <!-html-> <h5 style="text-align: center;">我是父组件</h5> <child-component msg="我是来自父组件的内容"></child-component> <script> let vue = new Vue({ el: '#app', data:{ }, components:{ 'child-component':{ props:["msg"], template:` <div style="border: 1px solid red; height: 100px">{{msg}}</div> ` } } }) </script> 解读：代码的使用和我们刚才的例子一样，分为两步 在子组件child-component 中声明接收的参数，props 数组里面的参数要加引号 (props:[“msg”] === 拨通电话号码) 父=>子通信时，数据内容写在子组件的标签里面 (msg=”我是来自父组件的内容” === 通话内容回家吃饭) 使用 V-bind 绑定参数实际开发当中，我们总是使用 :msg 来给子组件绑定内容当然他们是有区别的，也建议使用v-bind 来绑定内容 <!-html-> <child-component msg="[1,2,3]"></child-component> <child-component :msg="[1,2,3]"></child-component> <script> let vue = new Vue({ el: '#app', data:{ }, components:{ 'child-component':{ props:["msg"], template:` <div style="border: 1px solid red; height: 100px">{{msg.length}}</div> ` } } }) </script> 上述代码中，我们渲染一下 html 中加不加 v-bind 的区别js 代码部分，渲染 msg 和 msg.length（以数组为例）如图所示，虽然渲染的视图都是[1,2,3]，但 msg.length 明显不同，这是 Vue 帮我们做了处理如果不使用v-bind，它只是简单的、机械的复制如果使用 v-bind ，vue 就会检测参数是否符合 数组、对象、布尔…等特征，并渲染它们。 动态数据获取在基本传值和绑定参数中，我们看到的传值是静态写死的，怎么样获取动态传值呢？可以使用 v-bind + v-model 来实现 <!-html-> <input type="text" v-model="parentData"> <dynamic-component :msg="parentData"></dynamic-component> <script> let vue = new Vue({ el: '#app', data:{ parentData: 'LGD是不可战胜的' }, components:{ 'child-component':{ props:["msg"], template:` <div style="border: 1px solid red; height: 30px">{{msg}}</div> ` }, 'dynamic-component':{ props: ["msg"], template: ` <div style="border: 1px solid red; height: 30px">{{msg}}</div> ` } } }) </script> 上述代码就可以动态获取父组件中 data 里面的数据啦。这里还有一个要注意的点：Vue 中子组件的作用域只有自己本身，所以我们在传值时，两个不同的子组件都可以使用 msg 参数而没有被污染。 小结： 在组件中使用props来从父亲组件接收参数，注意，在props中定义的属性，都可以在组件中直接使用props来自父级，而组件中data return的数据就是组件自己的数据，两种情况作用域就是组件本身，可以在template，computed，methods中直接使用props的值有两种，一种是字符串数组，一种是对象，本次我们只以字符串数组为例可以使用v­-bind + v-model 动态绑定父组件来的内容 单向数据流所谓单向数据流就是指：通过 props 传递数据时，只能父传子，也就是父组件数据变化时会传递给子组件。目的：尽可能将父子组件解耦，避免子组件无意改变了父组件的状态 两种应用场景这个就直接沿用官网的举例 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值： props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } //this.initialCounter 用 this 直接拿到传进来的数据 data 里 return 一个对象保存起来 这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性： props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } } 命名规范因为html 标签中，不会区分大小写，而在 JS 里面严格区分大小写。所以这会造成一些不必要的BUG，为了避免遇到这样的 BUG，我们尽量统一命名。 html 中myMessage 和 mymessage 是一致的,因此在组件中的html 中使用必须使用kebab­case（短横线）命名方式。在html中不允许使用驼 峰！！！！！！ 组件中父组件给子组件传递数据必须用短横线。在template中，必须使用camelCased驼峰命名方式，若为短横线的命名方式。则会直接保错。 组件的data中用this.XXX引用时,只能是驼峰命名方式。若为短横线 的命名方式，则会报错。 数据验证在上面的传值例子中，我们多是以字符串传值示例，实际上任何类型的值都可以传给 prop。 <script> let vue = new Vue({ el: '#app', data: { parentData: 'LGD是不可战胜的' }, components: { 'my-component': { props: { //数字类型 propA: Number, //字符串类型 propB: String, //数字或者字符类型 propC: [Number, String], //布尔值，如果没有定义，默认就是 true propD: { type: Boolean, default: true }, //数字类型，而且是必传 propE: { type: Number, required: true }, //如果是数组或者对象，默认值必须是函数来返回 propF: { type: Array, default: function () { return [] } }, //自定义的验证函数 propG: { validator: function (value) { return value > 10 } } } } } }) </script> 总结一下，验证的类型可以是• String • Number • Boolean • Object • Array • Function • Date • Symbol验证类型有三个选项：type，default，required， 子=>父传值 自定义事件传值上面的剖析中我们了解到单向数据流（props）只能实现父=>子传值。如果我想子=>传值该怎么办呢？原生 JavaScript 设计模式中->观察者模式很好的解决了这个问题，即 dispatchEvent 和 addEventListener。幸运的是 Vue 中也用了与之类似的一套模式，子组件用$emit()来触发事件，父组件用$on()来监听子组件的变化。这其实就是 观察者模式：又被称作发布-订阅者模式。后续我们会深入了解第一步：自定义事件 change第二步：在子组件中用$emit()触发事件，第一个参数是事件名，后面是传递的数据第三步：在定义事件中用一个参数来接收它 <!- html -> <div id="app"> <p>您的银行卡余额是{{total}}元</p> <son-component @change="handletotal"> </son-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { total: 0 }, methods: { handletotal(value) { this.total = value } }, components: { 'son-component': { template: ` <div> <button @click="handleincrease">+1000</button> <button @click="handlereduce">-1000</button> </div> `, data: function () { return { count: 0 } }, methods: { handleincrease() { this.count += 1000 this.$emit('change', this.count) }, handlereduce() { this.count -= 1000 this.$emit('change', this.count) } } } } }) </script> v-model 传值<!-html-> <div id="app"> <p>您的银行卡余额是{{total}}元</p> <!- 绑定的是自定义事件 -> <son-component @change="handletotal"> </son-component> <hr> <p>您的银行卡余额是{{total}}元</p> <!- 绑定的是 v-model需要的值 -> <model-component v-model="total"></model-component> </div> <script> let app = new Vue({ el: '#app', data: { total: 0 }, //父组件中的这个 methods 是自定义事件用的 methods: { handletotal(value) { this.total = value }, }, components: { 'son-component': { template: ` <div> <button @click="handleincrease">+1000</button> <button @click="handlereduce">-1000</button> </div> `, data: function () { return { count: 0 } }, methods: { handleincrease() { this.count += 1000 this.$emit('change', this.count) }, handlereduce() { this.count -= 1000 this.$emit('change', this.count) } } }, 'model-component':{ template: ` <div> <button @click="handleincrease">+1000</button> <button @click="handlereduce">-1000</button> </div> `, data(){ return { count: 0 } }, methods:{ handleincrease(){ this.count += 1000 // v-model 监听的是 input，而不需要额外的自定义事件 this.$emit('input',this.count) }, handlereduce(){ this.count -= 1000 // v-model 监听的是 input，而不需要额外的自定义事件 this.$emit('input',this.count) } } } } }) </script> 区别为了清楚的展示 v-model 和绑定自定义事件的不同，我把他们写在了一起不同点：① v-model 绑定的是需要的值。自定义事件绑定的是一个函数，用来接收子组件给的值② v-model 在父组件中不需要写方法，也没有方法可写自定义事件需要在父组件中写方法，③ v-model 中 $emit 传入的是 input 事件自定义事件 中$emit 传入的是子组件中绑定的自定义事件为什么写法不同，但实际效果确实一致的呢？ v-model 做了什么此时v-model 其实是一个语法糖，背后做了两个操作 v-bind 绑定了一个 value 属性v-on 指令给当前元素绑定 input 事件 关键点在于使用 v-model 时，要做到接收一个 value 属性，在有新的 value 时触发 input 事件 一个 BUG不知道你们有没有发现一个 BUG（父组件数据被污染）这两个子组件，不管点哪个组件的按钮，父组件的数据都会跟着变化其实看代码就知道了，他们共用一个父组件数据现在我们组件比较少，在父组件声明两个不同名字的数据即可解决 新的需求就不想写两个名字，难道 1000 个组件，要重复写 1000 个不同名字吗？其实我们后面会了解到 Vuex（全局状态管理）能够很好的解决这个问题 非父组件传值如果有a b 两个非父组件怎么传值？在 Vue 中,可以这样做，先把 a 组件的值传给一个中介 bus（根组件声明），然后监听 b 组件创建之后，拿到这个值 <!- html -> <a-component></a-component> <b-component></b-component> <script> Vue.component("a-component", { template: '<div><button @click="handle">我是 a 组件</button></div>', data() { return { aaa: '我是来自 a 组件的内容' } }, methods: { handle() { this.$root.bus.$emit('lala', this.aaa) } } }) Vue.component('b-component', { template: '<div></div>', created() { this.$root.bus.$on('lala', function (value) { alert(value) }) } }) let app = new Vue({ el: "#app", data: { bus: new Vue() } }) </script> 修改父子组件的值传值部分基本结束，父传子，子传父，非父传值下面是修改父子组件的值 父链子组件修改父组件的值 <!- html -> <c-component></c-component>---{{msg}} <script> Vue.component('c-component',{ template:'<button @click="setFatherData">点我修改父组件</button>', methods:{ setFatherData(){ this.$parent.msg = '数据已经修改了' } } }) let app = new Vue({ el: "#app", data: { bus: new Vue(), msg: '数据还没修改', } }) </script> 子链父组件修改子组件的值，因为孩子比较多，我们可以给孩子增加 ref 属性来辨识要拿的是哪个儿子 <!- html -> <a-component ref="a"></a-component> <b-component ref="b"></b-component> <c-component ref="c"></c-component> <script> let app = new Vue({ el: "#app", data: { formchild: '初始值还未拿到' }, methods: { getChildData() { //获取子组件的内容，给子组件加 ref 以作区分 //-->这里是 refs this.formchild = this.$refs.a.msg } } }) </script> 完整代码 注册组件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <first-name></first-name> <br> <last-name></last-name> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('first-name',{ template:'<div style="color: #80bd01">我是第一个全局注册的组件</div>', }) let vue = new Vue({ el:'#app', data:{ }, components:{ 'last-name':{ template:'<div style="color: #0086B3">我是最后一个局部注册的组件</div>' } } }) </script> </body> </html> 父子组件通信<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件通信</title> </head> <body> <div id="app" style="border: 2px solid blue; height: 200px"> <h5 style="text-align: center;">我是父组件</h5> <child-component msg="我是来自父组件的内容"></child-component> <!-- <child-component msg="[1,2,3]"></child-component> <child-component :msg="[1,2,3]"></child-component> --> <input type="text" v-model="parentData"> <dynamic-component :msg="parentData"></dynamic-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vue = new Vue({ el: '#app', data: { parentData: 'LGD是不可战胜的' }, components: { 'child-component': { props: ["msg"], template: ` <div style="border: 1px solid red; height: 30px">{{msg}}</div> `,/* template:` <div style="border: 1px solid red; height: 100px">{{msg}}{{msg.length}}</div> `*/ }, 'dynamic-component': { props: ["msg"], template: ` <div style="border: 1px solid red; height: 30px">{{msg}}</div> ` }, 'my-component': { props: { //数字类型 propA: Number, //字符串类型 propB: String, //数字或者字符类型 propC: [Number, String], //布尔值，如果没有定义，默认就是 true propD: { type: Boolean, default: true }, //数字类型，而且是必传 propE: { type: Number, required: true }, //如果是数组或者对象，默认值必须是函数来返回 propF: { type: Array, default: function () { return [] } }, //自定义的验证函数 propG: { validator: function (value) { return value > 10 } } } } } }) </script> </body> </html> 子父组件通信<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子父组件通信</title> </head> <body> <div id="app"> <p>您的银行卡余额是{{total}}元</p> <!- 绑定的是 v-model -> <son-component @change="handletotal"> </son-component> <hr> <p>您的银行卡余额是{{total}}元</p> <!- 绑定的是 v-model 需要的值 -> <model-component v-model="total"></model-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { total: 0 }, //父组件中的这个 methods 是自定义事件用的 methods: { handletotal(value) { this.total = value }, }, components: { 'son-component': { template: ` <div> <button @click="handleincrease">+1000</button> <button @click="handlereduce">-1000</button> </div> `, data: function () { return { count: 0 } }, methods: { handleincrease() { this.count += 1000 this.$emit('change', this.count) }, handlereduce() { this.count -= 1000 this.$emit('change', this.count) } } }, 'model-component': { template: ` <div> <button @click="handleincrease">+1000</button> <button @click="handlereduce">-1000</button> </div> `, data() { return { count: 0 } }, methods: { handleincrease() { this.count += 1000 // v-model 监听的是 input，而不需要额外的自定义事件 this.$emit('input', this.count) }, handlereduce() { this.count -= 1000 // v-model 监听的是 input，而不需要额外的自定义事件 this.$emit('input', this.count) } } } } }) </script> </body> </html> 非父组件通信 和 修改组件的值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父组件通信</title> </head> <body> <div id="app"> 非父通信 <a-component ref="a"></a-component> <b-component ref="b"></b-component> <hr> 子组件修改父组件的值 <c-component ref="c"></c-component> ---{{msg}} <hr> 父组件修改子组件的值 <br> <button @click="getChildData">我是父组件的内容，我要拿到子组件</button> {{formchild}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component("a-component", { template: '<div><button @click="handle">我是 a 组件</button></div>', data() { return { aaa: '我是来自 a 组件的内容', msg: '我是 a 组件中 msg' } }, methods: { handle() { this.$root.bus.$emit('lala', this.aaa) } } }) Vue.component('b-component', { template: '<div></div>', data: { msg: '我是 b 组件中 msg' }, created() { this.$root.bus.$on('lala', function (value) { alert(value) }) } }) Vue.component('c-component', { template: '<button @click="setFatherData">点我修改父组件</button>', data: { msg: '我是 c 组件中 msg' }, methods: { setFatherData() { this.$parent.msg = '数据已经修改了' } } }) let app = new Vue({ el: "#app", data: { bus: new Vue(), msg: '数据还没修改', formchild: '初始值还未拿到' }, methods: { getChildData() { //获取子组件的内容，给子组件加 ref 以作区分-->这里是 refs this.formchild = this.$refs.a.msg } } }) </script> </body> </html>