组件的通信【王者】
为什么要进行组件通信?
组件是一个聚合体,将来项目要合并,那么必然各个组件之间需要建立联系,这个联系就是数据通信
- 分类
- 父子组件通信
- 理解:Data选项为什么是一个函数?
- 组件是一个聚合体,也是一个整体,它需要一个独立的作用空间,也就是它的数据需要是独立的,目前js的最大特点是函数式变成,而函数恰好提供了一个独立作用域,所以我们data在除根组件外都是函数
- 理解:为什么data函数需要返回一个返回值,返回值还是对象,不能是数组吗?
- Vue通过es5的Object.definePerproty属性对一个对象进行getter和setter设置,而data选项是作为Vue深入响应式核心的选项
- 过程
- 父组件将自己的数据同v-bind绑定在子组件身上
- 子组件通过props属性接收
<template id="father"> <div> <h3> 这里是father </h3> <Son :money = "money"></Son> </div> </template> <template id="son"> <div> <h3> 这里是son </h3> <p> 我收到了父亲给的 {{ money }} </p> </div> </template> <script> Vue.component('Father',{ template: '#father', data () { return { money: 10000 } } }) Vue.component('Son',{ template: '#son', props: ['money'] }) new Vue({ el: '#app' }) </script>
- props属性数据验证
- 验证数据类型
- 验证数据大小【判断条件】
// props: ['money'] // 数据验证 // props: { // 'money': Number // } props: { 'money': { validator ( val ) { // 验证函数 return val > 2000 } } }
- 工作中:第三方验证
- TypeScript【TS】
- 插件 vue-validator等
- 理解:Data选项为什么是一个函数?
- 子父组件通信
- 是通过自定义事件
- 事件的发布
- 通过绑定元素身上实现
- 事件的订阅
- 通过this.$emit触发
// html <div id="app"> <Father></Father> </div> <template id="father"> <div> <h3> 这里是father </h3> <p> 我现在有 {{ gk }} </p> <Son @give = "fn"></Son> </div> </template> <template id="son"> <div> <h3> 这里是son </h3> <button @click = "giveHongbao"> 给父亲红包 </button> </div> </template>
//js Vue.component('Father',{ template: '#father', data ( ) { return { gk: 0 } }, methods: { fn ( val ) { this.gk = val } } }) Vue.component('Son',{ template: '#son', data () { return { money: 5000 } }, methods: { giveHongbao () { this.$emit('give',this.money) } } }) new Vue({ el: '#app' })
- 事件的发布
- 是通过自定义事件
- 非父子组件通信
- ref链
- bus事件总线
var bus = new Vue() Vue.component('Father',{ template: '#father' }) Vue.component('Son',{ template: '#son', data () { return { flag: false } }, mounted () { // 也是一个选项,表示组件挂载结束 , 也就是说我们可以在View视图中看到这个组件了 // console.log( 'mounted ') // bus.$on(自定义事件名称,执行的事件处理程序) var _this = this bus.$on('cry',function () { _this.flag = true }) } }) Vue.component('Girl',{ template: '#girl', methods: { kick () { bus.$emit('cry') } } }) new Vue({ el: '#app' })
- 非常规手段进行组件通信【不推荐】
- 兵哥建议:如果标准方案可以实现,就不要用非常规手段
- 1.可以实现子父通信
- 父组件通过v-bind绑定一个方法给子组件
- 子组件通过props选项接收这个方法,然后直接调用
- 2.父组件通过v-bind绑定一个对象类型数据给子组件
- 3.子组件直接使用,如果更改这个数据,那么父组件数据也更改了
- 原因:同一个地址
- 非常规在哪里?
- 违背了单向数据流
- 多组件状态共享【vuex】
- 父子组件通信
slot
slot 插槽 比如:插卡游戏机
- 分类
- 普通插槽
- 具名插槽
- 给slot加一个name属性
<slot name="header"></slot>
- 注意:以上内容是Vue2.5.x的版本
- Vue 2.6.x以上的版本将使用v-slot指令来代替2.5.x使用方式
- v-slot指令
- 作用:
- 可以将组件的数据在组件的内容中使用
- 作用:
过渡效果
Vue框架使用css3过渡效果或是js动画
Vue内部提供给了一个叫做transition的过渡组件
使用transition包裹过渡元素,那么会自动添加6个类名,8个钩子函数
- 默认类名开头v
- 如果有name属性,那么使用这个name属性值作为类名开头
- 实现方式
- 在CSS过渡和动画中自动应用class【自己写】
- 可以配合使用第三方CSS动画库,如Animate.css
- 在过渡钩子函数中使用JavaScript直接操作DOM
- 可以配合使用第三方JavaScript动画库,如Velocity.js
- 第一种[在CSS过渡和动画中自动应用class【自己写】]
- animate.css
- 第三种:Vue提供了8个javascript钩子,我们需要自定义js动画
- 第四种:使用第三方插件:Velocity.js
swiper
swiper是一个实现滑动操作的一个第三方库,目前最好的滑动操作库
自定义指令
业务:页面开启时自动获得search按钮焦点
- 定义形式
- 全局定义
// Vue.directive('focus',{ // // 5个javascript钩子 5个中掌握2个 // bind (el,binding,vnode,oldVnode) { // 当自定义指令和元素绑定时触发 // console.log( 'bind', ) // }, // inserted ( el,binding,vnode,oldVnode ) { // 当自定义指令绑定的元素插入到页面时触发 // console.log( 'el',el) // console.log( 'binding',binding) // console.log( 'vnode',vnode) // console.log( 'oldVnode',oldVnode) // console.log('inserted') // if ( binding.modifiers.a ) { // el.style.background = 'red' // } else { // el.style.background = 'blue' // } // el.value = binding.expression // el.focus() // }, // updated () { // 当自定义指令的元素或是他的子元素发生变化式触发 // }, // componentUpdate () { //当自定义指令的元素或是他的虚拟子节点 发生变化式触发 // }, // unbind () { // 当自定义指令绑定的元素解绑时触发 // } // })
- 局部定义
new Vue({ el: '#app', directives: { 'focus': { bind () { }, inserted ( el ) { el.focus() } } } })
过滤器
- 作用
- 是对已经有的数据做数据格式化
- 使用格式
- 已有数据 | 过滤器名称(arg1,arg2)
<img :src = "item.img | imgFilter " οnerrοr="this.style.visibility='hidden'" >
- | 我们称之为管道符
- 定义
- 全局定义
- Vue.filter
- 局部定义
- filters选项
全局定义 // Vue.filter('imgFilter',function ( val ) { // //val就是需要格式化的数据 // // console.log('val',val) // return val.replace( 'w.h', '128.180') // }) new Vue({ el: '#app', data: { lists: [] }, filters: { // 局部定义 // 过滤器名称:function () {} 'imgFilter': function ( val ) { return val.replace( 'w.h', '128.180') } }, methods: { getList () { fetch('./data/list.json') .then( res => res.json()) .then( data => { this.lists = data.movieList }) .catch( error => console.log( error )) } } })
- 全局定义