吉林市网站制作哪家好,免费网站源码建站系统,昆明搜索引擎的关键词优化,网络营销与直播电商是干什么的#x1f4dd;个人主页#xff1a;五敷有你 #x1f525;系列专栏#xff1a;JVM
⛺️稳中求进#xff0c;晒太阳 组件通信
组件通信#xff0c;就是指组件与组件之间的数据传递
组件的数据是独立的#xff0c;无法直接访问其他组件的数据想用其他组件的数据--个人主页五敷有你 系列专栏JVM
⛺️稳中求进晒太阳 组件通信
组件通信就是指组件与组件之间的数据传递
组件的数据是独立的无法直接访问其他组件的数据想用其他组件的数据--组件通信
组件关系 父子关系 props和$emit prop定义组件上定义的属性prop作用向子组件传递数据特点 可以传递任何数量的prop可以传递任何类型的propprops的校验 为组件的prop指定验证要求不符合要求控制台就会有错误显示语法类型校验非空校验默认值自定义校验
//类型校验
props:{检验的属性名类型
}
//全
props:{校验的属性名:{type类型require:true,default:默认值,validator(value){//自定义校验逻辑return 是否通过校验} }
} 父传子 子传父 非父子关系 provide和injecteventbus通用解决方案Vuex适合复杂业务场景
小黑记事本组件化版 App.vue
templatediv idappdiv classmainTodoHeader addItemadd /TodoHeaderTodoMain :listlist deleteItemdel/TodoMainTodoFooter :totalNumtotalNum clearItemclear/TodoFooter/div/div
/templatescript
import TodoHeader from ./components/TodoHeader.vue;
import TodoMain from ./components/TodoMain.vue;
import TodoFooter from ./components/TodoFooter.vue;export default {name: App,components: {TodoHeader,TodoMain,TodoFooter},data(){return {list:JSON.parse(localStorage.getItem(list))||[{id:1,name:打篮球},{id:2,name:打足球},{id:3,name:打排球},{id:4,name:打气球}],}},computed:{totalNum(){return this.list.length}},watch:{list:{deep:true,handler(newValue){localStorage.setItem(list,JSON.stringify(newValue))}}},methods:{del(id){this.listthis.list.filter(itemitem.id!id)},clear(){this.list[]},add(todoName){this.list.unshift({id:new Date(),name:todoName})}}
}
/scriptstyle scoped
#app {height: 1200px;font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;margin-top: 60px;display: flex;justify-content: space-around;
}
.main{width: 40%;}
/styleTodoHead.vue
templatediv classmaindiv classtitle记事本/divdiv classsearchinput typetext v-model.trimitem v v-on:keyup.enteraddListinput typebutton clickaddList value添加/div/div
/template
scriptexport default {data(){return {item:}},methods:{addList(){this.$emit(addItem,this.item)this.item}}
}
/script
style scoped
.main{width: 100%;}
/styleTodoMain.vue
templatediv classmainul classtodo-listli v-for(item,index) in list :keyitem.id divspan{{ index1 }}/span nbsp;span{{ item.name }}/span /div divbutton clickhandlerDelete(item.id)X/button/div/li/ul/div
/template
scriptexport default {props:{list:Array},methods:{handlerDelete(id){this.$emit(deleteItem,id)},}
}
/script
style scoped.main{width: 100%;}li{padding: 5px 2px;border-bottom: 1px solid gray;list-style: none;display: flex;justify-content: space-around;}
/style
TodoFooter.vue
templatediv classmainspan{{totalNum}}/span span clickhanderClear清空记录/span/div
/template
scriptexport default {
props:{totalNum:Number
},methods:{handerClear(){this.$emit(clearItem)}}}
/script
style scoped
.main{display: flex;justify-content: space-between;}
span{color: gray;font-size: 13px;padding: 10px;
}
/style
非父子间通信两种方式
非父子通信enent bus
作用
非父子组件之间进行简易的消息传递复杂场景→Vuex
步骤
创建一个都能访问到的事件总线空的VUe实例→utils
文件名EventBus.js
创建一个都能访问到的事件总线(空的Vue实例)
import Vue from vueconst Busnew Vue()export default Bus 2. A组件接收方,监听Bus实例的事件
script
import Bus from ../utils/EventBus
export default {data(){return {msg:}},created(){//2.在A组件进行bus的事件监听Bus.$on(sendMsg,(msg){this.msgmsg})}}
/script 3. B组件发送方,触发Bus实例的事件
import Bus from ../utils/EventBus
export default {methods:{clickSend(){//3.B组件触发事件的方式传递参数Bus.$emit(sendMsg,今天晴天适合出去玩)}}
}
/script
非父子通信--provideinject
provide inject 作用跨层级共享数据 父组件provide提供数据
export default{provide(){//普通类型【非响应式】color:this.color,//复杂类型【响应式】userInfo:this.userInfo }
} 2. 子/孙组件inject取值使用
export default{inject:[color,userInfo],created(){console.log(this.color,this.userInfo) }
}
