zoukankan      html  css  js  c++  java
  • vue中父子组件之间的通信

    父组件对子组件通信:

      在父组件中: 

        <CreatePlan :dialogVisible="dialogVisible"></CreatePlan>
        以自定义属性(dialogVisible)的方式,由父向子通信
     
      在子组件中:
     
        接受方式:
            1、props:["dialogVisible"],
            2、props:{
                "dialogLearning":{
                  type:Boolean,
                  default:false,
                }
              },
     
    子组件对父组件通信:
     
      在父组件中: 
        
        <CreatePlan :dialogVisible="dialogVisible"@my-event="emitMyEvent"></CreatePlan>
     
        接受方式:以自定义方法(my-event)的方式,接受子向父传递过来的值
            // 接受子组件传递的过来的参数
            methods: {
              emitMyEvent(val){
                this.dialogVisible=val;//控制弹框的显示隐藏状态
              },
            },
     
      在子组件中:
     
        传递:以自定义的方法(my-event)的方式,传递给父组件
     
        // 子组件对父组件传值方法-----控制选择学习对象的显示与隐藏效果
        isShowFn(){
          this.$emit("my-event",false)
        },
     
     
    非父子组件的通信:
      1、vuex
      2、通过这个公共的原型属性,
        在main.js文件中    
          Vue.prototype.$bus=new Vue;
     
      传递用:this.$bus.$emit("my-event",false);
      接受用:this.$bus.$on("my-event",(val)=>{
            console.log(val)
          })
  • 相关阅读:
    js实现分享到QQ
    js 复制粘贴
    js弹窗 js弹出DIV,并使整个页面背景变暗
    PHP实现大转盘抽奖算法
    ext 树节点操作
    ExtJS4图片验证码的实现
    随笔分类
    Oracle、MySql、SQLServer 数据分页查询
    Repeater控件使用(含删除,分页功能)
    SQL compute by 的使用
  • 原文地址:https://www.cnblogs.com/dongyuezhuang/p/11434737.html
Copyright © 2011-2022 走看看