• vue兄弟之间传值 bus中央事件总线


    创建一个eventVue.js文件

    import Vue from 'vue'
    export default new Vue

    <template>
      <div>
        <div></div>
        <v-youngerChild></v-youngerChild>
        <v-bigChild></v-bigChild>
      </div>
    </template>
    
    <script>
    import YoungerChild from './Child'
    import BigChild from './BigChild'
    export default {
      components:{
        'v-youngerChild':YoungerChild,
        'v-bigChild':BigChild
      }
    }
    </script>

    哥哥

    <template>
      <div>
        <div>哥哥</div>
        {{message}}
      </div>
    </template>
    
    <script>
    import eventVue from '../assets/js/eventVue.js'
    export default {
      data(){
        return{
          message:'哥哥'
        }
      },
      created(){
        eventVue.$on("myFun",(message)=>{
          this.message=message
        })
      }
    }
    </script>

    弟弟

    <template>
      <div>
        <div>弟弟</div>
        <button @click="abtn">点击</button>
      </div>
    </template>
    <script>
    import eventVue from '../assets/js/eventVue.js'
    export default {
      data(){
        return{
          msg:'弟弟'
        }
      },
      methods:{
        abtn(){
          eventVue.$emit("myFun",this.msg)
        }
      }
    }
    </script>
  • 相关阅读:
    困勉而行
    6.12
    js 实现表格筛选不请求后台数据
    VUE方法和函数汇总
    sql isnull用法
    js forEach的用法
    js _this.$nextTick 解决页面渲染问题
    element table 复选框单选
    js attr 追加属性
    C# 过滤器 验证页面权限
  • 原文地址:https://www.cnblogs.com/zjx304/p/10681382.html
Copyright © 2020-2023  润新知