Vue组件的使用
Vue组件简述
组件化开发是Vue的开发模式,组件是Vue的重要组成部分。
vue私有组件的使用分三步
1.导入:import Left from '@/components/Left.vue'
2.注册:components: { Left }
3.使用:<Left/>
<template> <div id="app"> <h1>Hello Vue Component</h1> <Left/> </div> </template> <script> import Left from '@/components/Left.vue' export default { components: { Left } }; </script>
Vue全局组件的使用
在main.js文件中
1.导入import Left from '@/components/Left.vue'
2.注册Vue.component('MyLeft', Left)
import Left from '@/components/Left.vue' import Right from '@/components/Right.vue' Vue.config.productionTip = false Vue.component('MyLeft', Left) Vue.component('MyRight',Right)
Props自定义属性
使用props的优势:提高组件的复用性。
在自定义组件中,使用props给自定义组件定义自定义属性。
另外、如果对传入的属性有格外要求,则需要使用props对象定义,如果没有要求,则使用props数组定义。
<script> export default { // 组件的自定义属性,简单的方式 // 可以在外面使用时,可以自定义设置,传输 // props是一个数组 // props: ['customInitValue'], // 如果要对自定义属性设置默认值,那么就需要用下面这种对象的方式进行定义 props: { customInitValue: { // 设置自定义属性的默认值 default: 0, // 设置自定义属性的类型 type: Number, // 这个属性是必填项,自定义组件要传这个值 required: true } }, data() { return { count: 0, // 自定义属性是只读的,如果需要对自定义属性的值做修改,可以把它设置到data属性中 customInitCount: this.customInitValue }; }, }; </script>
自定义属性的使用
//传递的是字符串属性 <Counter customInitValue="3"></Counter> //使用v-bind:传递的是数字 <Counter :customInitValue="12"></Counter>
Vue组件的style样式冲突
因为Vue项目是单页面应用,所有项目里定义的所有组件最终都是放在一个index.html下,如果在组件内对h2标签添加css样式,等编译到项目后会对整个index.html页面整个范围内进行修饰。
解决方法:
通过给style标签添加scoped修饰,Vue会在编译完成的标签中自动给当前组件下的所有标签添加
data-v-001这样的属性,然后在添加样式时是自动改成标签+属性选择器的形式设置。这样可以保证组件内的style修饰只作用到当前的组件内。
<style lang="less" scoped> #counter { background-color: beige; } </style>
对于要在UI页面中修改使用的第三方库中的样式需求,可以使用deep深层修改<style lang="less" scoped>
#right { background-color: brown; // 使用场景:项目UI中使用了第三方库的UI组件,开发中要自定义修改第三方库组件的样式,又不能直接拿第三库的源码修改,可以通过/deep/深层修改 // 使用/deep/ p修饰的样式 编译器最终会转成[data-v-001] p{}父子选择器的形式 /deep/ p { background-color: pink; } } </style>
Vue项目运行流程
1.在main.js项目入口,通过Vue实例将根组件实例替换到index.html的占位标签上
2.因为浏览器是无法解析vue文件的,所以在运行Vue项目之前,会先通过webpack进行编译,将vue文件编译成普通的js文件,添加到index.html中,浏览器就可以去解析了。编译工具为:
vue-template-compiler
3.创建组件实例
每一个组件本质上是一个构造函数<template>
<div id="left"> Left - 组件 <Counter v-bind:customInitValue="3"></Counter> </div> </template>
<MyLeft></MyLeft>
组件的生命周期
重要的生命周期函数
组件创建阶段
created: props, data, methods初始化完成
mounted: 内存中的html结构已经渲染到了Dom中。
组件运行阶段
当数据发送变化时,就会触发更新周期函数
beforeUpdata: 数据改变,DOM结构没变
updated: 数据和DOM结构都改变了
组件之间的数据共享
父向子:自定义属性。
子向父:自定义事件。
兄弟传值:eventBus。
父组件向子组件传值
1.子组件定义props
2.父组件使用子组件,并给自定义属性设置值
注意:如果父组件向子组件传递一个对象,其实传递的是对象的引用。验证方式是在子组件接收的对象上,使用.语法修改这个引用的属性,会发现连同外部的父组件中的信息一起改变了。
子组件向父组件传值
子组件发送自定义事件this.$emit('numchanged', this.count)
<template> <div> 当前计数:{{count}} <button @click="increat">+1</button> </div> </template> <script> export default { data() { return { count: 0 }; }, methods: { increat() { this.count += 1 this.$emit('numchanged', this.count) } }, }; </script>
父组件处理自定义事件
<Child @numchanged="handleChildChange"></Child>
兄弟组件EventBus通信
1.创建EventBus模块,使用一个空vue实例用来作为发送消息,接收消息的通道
import Vue from 'vue' export default new Vue()
2.Left组件通过EventBus通道,发送消息bus.$emit('sendMsg', this.message)<template>
<div id="left"> <button @click="sendMsg">发送好诗给Right组件</button> </div> </template> <script> import bus from '../event/EventBus' export default { components: { Counter }, data() { return { message: '黑云压城城欲摧, 甲光向日金鳞开' }; }, methods: { sendMsg() { bus.$emit('sendMsg', this.message) } }, }; </script>
<template> <div id="right"> Right 子组件 {{reciveMsg}} </div> </template> <script> import bus from '../event/EventBus' export default { data() { return { reciveMsg: '' }; }, created() { bus.$on('sendMsg', (val) => { this.reciveMsg = val }) } }; </script>
Ref引用
在html开发中,经常会通过浏览器提供的API操作DOM,在Vue中也提供了一种途径用来操作DOM
这种不是调用document.getElementById()这样,而是通过设置ref引用属性来设置的。
在Vue实例中,有一个内置的属性$refs, 里面保存了当前组件实例中所有的refs, 组件中的标签定义的ref都被收集在了这里。
组件内部标签的refs
<template> <div> <h2>引用组件</h2> <hr> <p ref="pRef">鹅鹅鹅,曲项向天歌</p> <button @click="changeColor">点击变色</button> </div> </template> <script> export default { methods: { changeColor() { console.log(this); this.$refs.pRef.style.color = 'red' } }, }; </script>
组件内部的子组件
<template> <div id="app"> <h1>Hello Vue Component</h1> <h2>Child组件的计数为:{{supCount}}</h2> <button @click="resetZero">将计数重置为0</button> <hr> <input v-if="visibelInput" @blur="hideInput" ref="iptRef" type="text"> <button v-else @click="showInput" >请输入文字</button> <hr> <!-- 3.使用组件 --> <Child ref="child" @numchanged="handleChildChange"></Child> </div> </template>
this.$nextTick是实例对象中内置的方法,它的回调方法是在下一个回调周期开始时调用
methods: { handleChildChange(val) { console.log(val); this.supCount = val }, resetZero() { console.log(this); this.$refs.child.count = 0 }, showInput() { this.visibelInput = true this.$nextTick(()=>{ this.$refs.iptRef.focus() }) }, hideInput() { this.visibelInput = false } }
动态占位组件component
vue内置组件component, 是一个组件占位符,通过属性is可以动态替换不同的组件
<component :is="comName"></component>
当同一个位置的组件被来回切换时,组件默认是在隐藏时销毁,出现时创建。如果想要保存上一次组件的操作状态,可以把component组件包到KeepAlive标签内,这样在组件切换时,只会进入后台处于失活状态,进入前台激活状态。
KeepAlive标签内部默认所有的组件都被缓存,可以使用include或exclude表示哪几个组件包含或不包含。
<KeepAlive include="Left,Right"> <component :is="comName"></component> </KeepAlive>
组件进入后台,前台时对应生命周期方法
export default { name: 'VueAdvancedComponentDeomLeft', data() { return { count: 0 }; }, methods: { }, created() { console.log('被创建',this); }, destroyed() { console.log('被销毁',this); }, deactivated() { console.log('被缓存,进入后台',this); }, activated() { console.log('被激活,进入前台',this); } };
组件的名称
组件的创建名称,在浏览器调试时用
export default { name: 'VueAdvancedComponentDeomApp', }
组件的注册名称,用于组件开发时用
<script> import Left from '@/components/Left/Left.vue' import Right from '@/components/Right/Right.vue' export default { name: 'VueAdvancedComponentDeomApp', components: { Left, Right },
slot插槽
slot插槽是Vue为组件封装者提供的能力,它可以让组件中需要用户自定义灵活填充的部分使用slot占位,供外部自定义传入。
有自定义名字的插槽叫:具名插槽
无自定义名字的插槽叫:默认插槽
当定义一个复杂组件时,里面会有多个插槽,这是默认插槽是没有意义的。真正使用的是具名插槽。
<template> <div class="container"> 插槽Left组件 <hr> <!-- 没有设置name的插槽叫默认插槽, 在组件中没有指定v-slot:name的插槽内容默认会放置到默认插槽中 --> <slot> </slot> <hr> <!-- 设置了name的插槽叫做具名插槽 --> <slot name="second"> <h6>插槽后备内容second:当外部没有给这个插槽设置值时,会展示默认展示这块</h6> </slot> <slot name="third"> <h6>插槽后备内容third:当外部没有给这个插槽设置值时,会展示默认展示这块</h6> </slot> </div> </template>
插槽组件的使用
使用组件中的某个插槽时,可以通过
<template v-slot:second>
<template #third>
这两种方式
<SlotLeft> <!-- slot定义时有一个name属性,如果不设置默认叫default --> <!-- 在外部使用这个标签时,可以选择将插槽内容根据v-slot:name放到那个slot定义中 --> <!-- v-slot:name使用时,外面要使用template虚拟组件进行包裹,template虚拟组件并没有真实的内容 --> <template v-slot:second> <p>second插槽组件子内容</p> </template> <!-- v-slot:标志的简写是# --> <template #third> </template> <p>默认添加到默认插槽位置中</p> </SlotLeft>
如果插槽中既包含名称,又包含了属性,那么这个插槽叫作用域插槽
作用域插槽的传值类型是:子传父
<template> <div class="article-container"> <slot name="body" msg="hello vue.js" :user="userInfo"> 文章的内容 </slot> </div> </template> <script> export default { data() { return { userInfo: { name: 'Jack', age: 30 } }; }, }; </script>
接收插槽传递过来的对象:v-slot:body="scope"
<Article> <template v-slot:body="scope"> <p>桃花潭水深千尺, 不及汪伦送我情</p> <p>{{ scope }}</p> </template> </Article>
自定义指令
1.私有自定义指令
2.公共自定义指令
私有自定义指令
<template> <div class="article-container"> <p v-color>文章描述</p> <p v-color="'blue'">私有自定义指令传参</p> </div> </template> <script> export default { // 私有自定义指令 directives: { // color: { // // 当指令第一次被绑定到元素上面时,会执行bind函数, 其他都不再调用 // // binding是私有自定义指令的传参 // bind(el, binding) { // console.log(el); // el.style.color = 'red' // console.log(binding); // el.style.color = binding.value // }, // // Dom每次更新的时候调用 // update(el, binding) { // console.log(el); // el.style.color = 'red' // console.log(binding); // el.style.color = binding.value // } // } // 如果自定义指令中的bind方法和update方法的实现一样,那么可以使用color: function(){}形式,统一实现。 color(el, bingding) { console.log(el); el.style.color = 'red' console.log(binding); el.style.color = binding.value } } }; </script>
全局自定义指令
Vue.directive('color', { bind(el, binding) { el.style.color = binding.value }, update(el, binding) { el.style.color = binding.value } }) Vue.directive('color', (el, binding) { el.style.color = binding.value })