Vue组件的使用方法

it2023-04-29 71

Vue组件的使用方法

Vue组件化思想

组件化是Vue中的重要思想

他提供了一种抽象,让我们可以开发出一个个可复用的小组件来构造我们的应用任何应用都会被抽象成一颗组件树

组件化思想的应用

尽可能的将页面拆分成一个个可复用的小组件方便代码管理,可复用性强

注册组件的基本步骤

组件使用分为三个步骤

1.调用Vue.extend创建构造器传入template代表我们自定义组件的模板,该模板就是使用到组件的地方,要显示的html代码2.Vue.component() 注册组件(全局注册和局部注册) 调用Vue.component()是将刚才的构造器注册成一个组件,并给他取一个组件的标签名称需要两个参数,:1.注册组件的名称 2. 被注册的构造器的名称使用组件组件必须被挂载在某个Vue实例下,否则他不会生效 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //创建组件构造器 const cpnC = Vue.extend({ template:`<div>啊</div>` }) //注册组件(全局组件,意味着可以在多个vue实例中使用) Vue.component('cpn',cpnC) const app = new Vue({ el:"#app", data:{ } }) </script>

vue的全局组件和局部组件

上面的组件在注册时,可以看到是全局组件,而全局组件的意思是可以在多个Vue实例下使用,但是,实际项目开发中,这样不是很方便,因此还有局部组件

全局组件

全局组件的注册方法

Vue.component('组件名称',组件构造器名称)

好处所有的Vue实例都可以用坏处容错率低,一般都需要在某个节点下使用

局部组件

局部组件只能在当前Vue实例下使用因此直接在创建的Vue的实例下注册

const app = new Vue({ el:"#app", data:{ }, components:{ //注意组件名称不能使用驼峰命名 'app-component':{ template:`<div>啊</div>`//内容必须被html元素包裹 }, //可以有data属性,但是里面必须是个函数 data:{ function(){ } } } })

当某些html标签不能放入我们的自定义组件时

可以在的那个钱html标签上添加is属性+组件标签名称

组件内部是不能访问Vue实例数据的

Vue组件应该有自己保存自己数据的地方

那么组件内部的数据放在哪里呢?

就像Vue实例一样,组件内部也有个data属性但是这个data属性必须是一个函数而且这个函数返回一个对象,对象内部保存数据 const app = new Vue({ el:"#app", data:{ }, components:{ 'cpn2':{ template:"#cpn2", data(){ return { msg: '干嘛' } } } } })

所以,因为组件的内部的data是return的对象,因此这个data的对象可以被复用,这个组件就可以被复用,作为独立的组件运行相互不干扰

父子件通信

上面提到了,子组件是不能引用父组件或者Vue实例数据的但是,在开发中,往往数据是需要从上层往下层传递的

那么如何进行父子间通信呢

使用props向子组件传递数据通过事件像父组件传递数据

关于父组件像子组件传递信息,可以这么理解

首先,父组件在应用子组件的元素标签上引用一个属性 a1 ,标签内容为你好子组件使用props传递父组件的内容此时,props数组中的’属性名称’,就是父组件元素标签上的属性.那么属性名称=‘内容’,此时props数组内的’属性名称’.两个属性名称相同,达到了引用的方法那么这个属性内容就可以被引用,在子组件的模板上直接使用属性名称,就可以引用属性内容而父组件的属性一般都是动态绑定的,绑定在Vue的实例中的data中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="app"> <child-component a1='你好'></child-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ }, components:{ 'child-component':{ template:`<div>{{a1}}</div>`, props:['a1'] } } }) </script> </body> </html>

单向数据流

第一种使用场景

将父组件传递进来的数据通过初始值保存起来 props的值可以通过组件data函数中的this.xxx直接获取这样保存好的来自父组件的数据,就可以在不同组件中单独操作

这样,我子组件直接引用data函数返回的对象中的count就可以了嗷 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="app"> <child-component a1='你好'></child-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ }, components:{ 'child-component':{ template:`<div>{{count}}</div>`, props:['a1'], data(){ return{ count: this.a1 } } } } }) </script> </body> </html>

第二种使用场景

另一种情况时props作为需要被转变的原始值传入,这种情况计算属性就可以将父组件传递进来的数据,通过计算属性重新计算,返回值

小demo,根据父组件传进来的数字,决定子组件的宽度 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="app"> <input type="text" v-model='width'> <child-component :a1='width'></child-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ width:'0' }, components:{ 'child-component':{ template:`<div :style='style'>{{a1}}</div>`, props:['a1'], computed:{ style(){ return { width: this.a1 +'px', background: 'red', height: '100px' } } } } } }) </script> </body> </html>

那么子组件怎么给父组件传递信息呢?

子组件使用$emit()触发事件父组件用$on()监听事件

第一步自定义事件第二步在子组件使用$emit()触发事件,第一个参数是事件名,后面是要传递的数据第三步,在自定义事件中用一个参数接收 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="app"> 点击数字发生变化:{{msg}} <child-component @change='handleMsg'></child-component> </div> <template id='aaa'> <button @click='add'>+</button> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:'#app', methods:{ handleMsg(value){ this.msg=value//父组件事件方法中拿到子组件的值,并把值付给msg } }, data:{ msg:0 }, components:{ 'child-component':{ template:'#aaa', data(){ return { count: 0 } }, methods:{ add(){ this.count++//设置子组件点击事件的方法,点击按钮造成子组件的count++ this.$emit('change',this.count)//然后把子组件的count的值传递给父组件的自定义事件,第一个参数是自定义事件的名称,第二个参数是子组件要传递的值 } } } } }) </script> </body> </html>

上面的例子使用的是自定义事件

其实不需要使用自定义事件,直接绑定v-model,并$emit()触发input事件,效果是一样的

就是个语法糖因为v-model是双向绑定的,v-model本身绑定的是input事件,并且动态绑定value和data的值因此,原理就是将子组件的参数传给value,通过v-model,然后传给父组件的data.

最新回复(0)