vue v-if高级封装 用函数封装代码

代码示例文件

混入设计代码

// const EVENT_TOGGLE = 'toggle'

export default {
  data() {
    return {
      // If use the prop visible directly, the toggle will failed when user haven't set v-model as a reactive property.
      // So we use the data isVisible instead.
      isVisible: true
    }
  },
  methods: {
    // 用于识别兄弟组件的方法  传入 兄弟组件中在data定义的 name:"名字"
    findcomputed(name) {
      console.log(this.$parent.$children)
      let arry1 = this.$parent.$children
      let c = arry1.find(val => {
        return val.name === name
      })
      return arry1.indexOf(c)
    },
    findRefs(name) {
      let arry1 = this.$parent.$refs
      console.log(arry1, name)
      // let c = arry1.find(val => {
      //   return val === name
      // })
      // return arry1.indexOf(c)
    },
    show() {
      this.isVisible = true
    },
    hide() {
      this.isVisible = false
    }
  }
}

混入代码 内容很简单 在vue中新建一个mixins.js文件，在其中新建一个data（）isVisible的变量为布朗值，在新建2个方法，分别是show() hide()关闭和开启方法

父组件代码示例

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" ref="hh" />
    <div @click="uio()"><button>我是父组件关闭子组件的方法</button></div>
    <computonLt ref="cc" />
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  import computonLt from './components/computont.vue'
  export default {
    name: 'App',
    components: {
      HelloWorld,
      computonLt
    },
    methods: {
      // 后期放在公共方法里面 根据name识别
      findFathercomputed(name) {
        console.log(this.$parent.$children)
        let arry1 = this.$parent.$children[0].$children
        let c = arry1.find(val => {
          return val.name === name
        })
        return arry1.indexOf(c)
      },
      uio() {
        // 以下2种方法都可以
        // 方法1 调用公共函数
        let i = this.findFathercomputed('ccc')
        console.log(i)
        if (this.$parent.$children[0].$children[i].isVisible) {
          this.$parent.$children[0].$children[i].hide()
        } else {
          this.$parent.$children[0].$children[i].show()
        }

        // 方法2   写一个refs
        // 父组件关闭子组件直接用this.$refs.cc方法
        // console.log(this.$refs.cc)
        // this.$refs.cc.hide()
        // if (this.$refs.cc.isVisible) {
        //   this.$refs.cc.hide()
        // } else {
        //   this.$refs.cc.show()
        // }
      }
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

父组件只需要在子组件上 绑定refs 方法能够共享到vue原型链中

子组件代码示例

<template>
  <div ref="Helloworld" class="view" v-show="isVisible">我是子组件Hellow</div>
</template>

<script>
  import visibilityMixin from '../common/visibei'

  export default {
    mixins: [visibilityMixin],
    name: 'index',
    data() {
      return {
        name: 'hhh',
        positionX: 0,
        positionY: 0,
        i: [{ input: '' }]
      }
    },
    methods: {}
  }
</script>

<style scoped>
  .view {
    background: blue;
  }
</style>

子组件需要将代码混入代码文件引入，并且将需要显示隐藏的部分用v-show包裹

子组件代码2

<template>
  <div class="page" v-show="isVisible" id="computont">
    <div @click="uio('hhh')"><button>点击关闭兄弟组件的方法</button></div>
    <div>我是子组件CCCC</div>
  </div>
</template>

<script type="text/ecmascript-6">
  import visibilityMixin from "../common/visibei"
    export default {
      mixins:[ visibilityMixin],
      data() {
        return {
         name:"ccc"
        }
      },
      components: {

      },
      methods: {
      uio() {
        // let i =  this.findcomputed(name)  //在混入里面我定义了 一个方法根据data 中的name 查找数组的位置
        if (this.$parent.$refs.hh.isVisible) {
          this.$parent.$refs.hh.hide()
        } else {
         this.$parent.$refs.hh.show()
        }
        // this.$parent.$refs.hh.hide()
        console.log(this.$parent.$refs)
      }
    }
    }
</script>

<style scoped>
  .page {
    width: 200px;
    height: 660px;
    background-color: red;
  }
</style>

使用方法 父组件显示隐藏子组件

接下来就是神奇的一幕，你需要做的首先就是打印原型链 理解方法 以下是父组件中的方法


可以看到在父组件中已经可以看到子组件的关闭，和显示方法，直接调用即可显示或者隐藏，

this.$refs.cc.hide()

使用方法2 子组件显示隐藏兄弟组件

在子组件中调用兄弟组件的混入方法要注意的是需要注意的方法是下面的

this.$parent.$refs.hh.hide()

因为只有在原型链的上一级才能调用

总结

当页面的结构。逻辑比较复杂时，比如一个父页面有2个弹框，打开一个另一个需要关闭，反复调用可能导致页面代码比较混乱这个时候可以考虑用混入代码进行封装，已达到仅仅用一个通用方法实现显示隐藏。