兄弟组件之间的数据共享
在VUE2.X里兄弟共享用的方案是 EventBus
剖析兄弟组件共享数据
拟定left向right传输数据,创建eventbus中间件后一定将它分别引入到Left和Right内
Left
<template> <div class="left-container"> <button @click="send">把诗发送给right</button> </div> </template> <script> import bus from './eventbus' export default { data () { return {str:'hello world'} }, methods : { send(){ bus.$emit('share',this.str) } } } </script> <style lang="less"> .left-container { padding: 0 20px 20px; background-color: orange; min-height: 250px; flex: 1; } </style>
创建eventbus.js文件
import vue from 'vue' export default new vue()
Right
<template> <div class="right-container"> <h3>Right 组件 </h3> <p>{{msgfrom}}</p> </div> </template> <script> import bus from './eventbus.js' export default { data () { return { msgfrom : '' } }, created(){ bus.$on('share',(val)=>{ this.msgfrom=val }) } } </script> <style lang="less"> .right-container { padding: 0 20px 20px; background-color: lightskyblue; min-height: 250px; flex: 1; } </style>
ref引用
不引入jq来获取dom元素(VUE内建议不使用JQ)
<template>
<div class="app-container">
<h1 ref="myh1">App 根组件</h1>
<button @click="showTimes">按钮 </button>
<hr />
<div class="box">
<!-- 渲染 Left 组件和 Right 组件 -->
</div>
</div>
</template>
<script>
export default {
methods : {
showTimes(){
this.$refs.myh1.style.color='red'
}
}
}
</script>
ref同时可以加给组件
Left
<template> <div class="left-container"> <h3>Left 组件 ---- {{count}}</h3> <button @click="count++">按钮</button> <button @click='reset'>重置</button> </div> </template> <script> export default { data () { return {count:0} }, methods : { reset() { this.count=0 } } } </script> <style lang="less"> .left-container { padding: 0 20px 20px; background-color: orange; min-height: 250px; flex: 1; } </style>
APP
<template> <div class="app-container"> <h1 ref="myh1">App 根组件</h1> <button @click="showTimes">按钮 </button> <!-- 重置Left组件 --> <button @click="onReset">重置Left组件=0</button> <hr /> <div class="box"> <!-- 渲染 Left 组件和 Right 组件 --> <Left ref="comLeft"></Left> </div> </div> </template> <script> import Left from '@/components/Left.vue' export default { methods : { showTimes(){ this.$refs.myh1.style.color='red' }, onReset(){ this.$refs.comLeft.reset() } }, components : {Left} } </script> <style lang="less"> .app-container { padding: 1px 20px 20px; background-color: #efefef; } .box { display: flex; } </style>
ref例子
需求:一个输入框,一个按钮,分别切换显示隐藏 inputVisible为固定写法
this.nextTick 作用是延迟在渲染结束后使用
APP
<template> <div class="app-container"> <h1 ref="myh1">App 根组件</h1> <button @click="showTimes">按钮 </button> <hr /> <input type="text" v-if='inputVisible' @blur="showButton" ref='iptRef'> <button v-else @click="showInput">展示输入框</button> <hr> <div class="box"> <!-- 渲染 Left 组件和 Right 组件 --> <Left ref="comLeft"></Left> </div> </div> </template> <script> import Left from '@/components/Left.vue' export default { data () { return{ inputVisible:false } }, methods : { showButton() { this.inputVisible=false }, showInput() { this.inputVisible=true this.$nextTick(()=>{ this.$refs.iptRef.focus() }) }, }, components : {Left} } </script> <style lang="less"> .app-container { padding: 1px 20px 20px; background-color: #efefef; } .box { display: flex; } </style>
复习some,every,reduce
Some方法取代Foreach (满足自己需求好要进行固定语句return true)
<script>
const arr = ['小红','老红','老紫']
arr.some((item,index)=>{
if(item==='老红') {
console.log(index)
return true
}
})
</script>
Every方法用于检测数组中的所有元素是否都满足指定条件
<script>
const arr = [
{id : 1 , name : '西瓜' , state : true},
{id : 2 , name : '南瓜' , state : true},
{id : 3 , name : '北瓜' , state : true}
]
//判断数组中每个水果是否被全选(判断条件)
const res = arr.every(item => item.state)
console.log(res)
</script>
reduce累加方法
<script>
const arr = [
{id : 1 , name : '西瓜' , state : true , price : 10 , count : 1},
{id : 2 , name : '南瓜' , state : false , price : 20 , count : 2},
{id : 3 , name : '北瓜' , state : true , price : 30 , count : 3}
]
//把已勾选的水果累加起来
//reduce语法:
//arr.filter(item=>item.state).reduce((累加的结果,当前循环项)=>{},初始值)
const mm = arr.filter(item => item.state).reduce((amt,item)=> amt+= item.price * item.count,0)
console.log(mm)
</script>