精华内容
下载资源
问答
  • 正常情况下,父组件可以监听子组件传递过来的事件,那么子组件怎么监听父组件事件呢? 实际案例: 假设子组件是一个弹框表单,子组件里边我预留了一个按钮位置,用于【添加数据】或者【编辑数据】按钮,点击按钮,...

    正常情况下,父组件可以监听子组件传递过来的事件,那么子组件怎么监听父组件的事件呢?

    实际案例:
    假设子组件是一个弹框表单,子组件里边我预留了一个按钮位置,用于【添加数据】或者【编辑数据】按钮,点击按钮,子组件显示弹框。

    示例一:整个组件监听事件

    <template>
      <div @click="changeVisiable">
        <slot></slot>
        <div v-show="visiable">显示隐藏的内容</div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          visiable: false,
        };
      },
    
      methods: {
        changeVisiable() {
          this.visiable = !this.visiable;
        },
      },
    };
    </script>
    

    父组件

    <template>
      <div id="app">
        <Child>
          <button>打开</button>
        </Child>
      </div>
    </template>
    
    <script>
    import Child from "./Child.vue";
    
    export default {
      name: "app",
    
      data() {
        return {};
      },
    
      components: { Child },
    };
    </script>
    
    

    此时也可以实现父组件中点击按钮,子组件触发相应的事件,此时,整个div标签都会接受到点击事件,范围扩大了
    在这里插入图片描述

    示例二:使用插槽事件

    子组件

    <template>
      <div>
        <slot></slot>
        <div v-show="visiable">显示隐藏的内容</div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          visiable: false,
          reference: null,
        };
      },
    
      methods: {
        changeVisiable() {
          this.visiable = !this.visiable;
        },
      },
    
      mounted() {
        if (this.$slots.default) {
          this.reference = this.$slots.default[0].elm;
        }
        if (this.reference) {
          this.reference.addEventListener("click", this.changeVisiable, false);
        }
      },
    
      beforeDestroy() {
        if (this.reference) {
          this.reference.removeEventListener("click", this.changeVisiable, false);
        }
      },
    };
    </script>
    

    父组件

    <template>
      <div id="app">
        <Child>
          <button>打开</button>
        </Child>
      </div>
    </template>
    
    <script>
    import Child from "./Child.vue";
    
    export default {
      name: "app",
    
      data() {
        return {};
      },
    
      components: { Child },
    };
    </script>
    
    

    当父组件中的按钮被点击,子组件的隐藏内容将会被显示

    此方法发现这个组件写的代码量变大了

    方式三:监听参数变化

    <template>
      <div>
        <slot></slot>
        <div v-show="visiable">显示隐藏的内容</div>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        visiable: {
          type: Boolean,
          default: false,
        },
      },
    };
    </script>
    

    父组件

    <template>
      <div id="app">
        <Child :visiable="visiable">
          <button @click="handleClick">打开</button>
        </Child>
      </div>
    </template>
    
    <script>
    import Child from "./Child.vue";
    
    export default {
      name: "app",
    
      data() {
        return {
          visiable: false,
        };
      },
    
      components: { Child },
    
      methods: {
        handleClick() {
          this.visiable = !this.visiable;
        },
      },
    };
    </script>
    

    此例通过父组件传递的参数控制子组件的内容显示,通过参数来实现组件通信,如果<slot> 标签的内容变化可预期,可以使用一个参数来控制是添加,还是编辑,来显示不一样的按钮形式。

    参考
    [ Vue ] 给 slot 插槽绑定事件

    展开全文
  • vue 子组件监听父组件的点击事件

    千次阅读 2020-07-14 16:03:03
    父组件中的子组件写法 <div @click=“onclick”> export default { onClick(name) { this.name = name; if(name == 1){ this.focusNewsActive = true; } this.$refs.sonV.onClick(this.focusNewsActive); }...

    使用vue-vant tab切换点击时只有点击的时候才加载数据,没有都用vant中的tab切换因为vant的tab切换滚动条不能固定
    父组件中的子组件写法

    <template>
    	<div @click="onclick"></div>
    	<focusNews  ref="sonMethod"></focusNews>
    </template>
    export default {
    		onClick(name) {
                    this.name = name;
                    if(name == 1){
                        this.focusNewsActive = true;
                    }
                    this.$refs.sonMethod.onClick(this.focusNewsActive);
                },
    }
    子组件写法
    onClick(param){
                    if(param == true) {
                        this.onLoad()
                    }
                },
    
    展开全文
  • 子组件改变父组件传递的 参数 不刷新 ...② 父组件 监听数据 this.reFresh= false this.$nextTick(()=>{ this.reFresh = true }) ##具体实现 子组件 <template> <a-input> <a-ico...

    子组件改变父组件传递的 参数 不刷新

    ① 子组件上 添加 v-if

    ② 父组件 监听数据

    this.reFresh= false  
     this.$nextTick(()=>{
     this.reFresh = true 
       })
    

    ##具体实现

    子组件

    <template>
          <a-input>
            <a-icon @mousedown="cleanClick"/>
            <span slot="suffix" v-show="!cleanInputType"> 分</span>
          </a-input>
     </template>
    
    cleanClick() {
      
      // 判断如果是关联小题 那么就开始让他的题型状态为false
    
      if (this.scoreParam.structureType) {
    
        this.scoreParam.multipleFlag = false;
        this.scoreParam.fillBlankFlag = false;
      }
      this.$emit('my-reFresh', this.scoreParam);
    },
    

    父组件

    <to-score-templeate
      v-if="reFresh"
      @my-reFresh="myReFresh"
     ></to-score-templeate>
    
    myReFresh(msg){
      this.reFresh= false
      this.$nextTick(()=>{
        this.reFresh = true
      })
      console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
    }
    
    展开全文
  • EventEmitter的一个典型应用就是父组件监听子组件事件子组件暴露一个 EventEmitter 属性,当事件发生时,子组件利用该属性 emits(向上弹射)事件父组件绑定到这个事件属性,并在事件发生时作出回应。 即: ...

    EventEmitter的一个典型应用就是父组件监听子组件的事件。

    子组件暴露一个 EventEmitter 属性,当事件发生时,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应。

    即:
    子组件发射-父组件接收-响应
    子组件的eventEmitter是一个输出属性, 通常带有@output()装饰器。
    子组件:

     

    //EventEmitter 属性
     @Output() voted = new EventEmitter<boolean>();
    //向父组件发射 一个boolean型的参数 agreed
     vote(agreed: boolean) {
        this.voted.emit(agreed);
      }
    

    父组件绑定并响应:
    通过子组件的引用,在组件引用上面绑定:(eventEmitter)="模板表达式",就像响应(click)事件一样。
    这个例子里面绑定:

     

     template: `
      //(voted)绑定事件响应,右边表达式为响应的方法,定义在父组件中,$event接收子组件发射的参数
      <app-child (voted)="doSomething($event)">
      </app-child>
      `
    

    angular 把事件参数用$event 传递给父组件中的处理方法。



    作者:柳源居士
    链接:https://www.jianshu.com/p/145a06f05206
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 本篇文章主要介绍了vue2.x 父组件监听子组件事件并传回信息的方法,具有一定的参考价值,有兴趣的可以了解一下
  • 通过事件绑定来监听子组件的通知(暂且叫通知吧) 使用@output修饰器 父组件命名app-parent 子组件命名app-child 在子组件app-child中定义出口事件: //引入组件 import {Output, EventEmitter} from '@...
  • 比如有父组件 Parent 和子组件 Child,如果父组件监听子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue // Child.vue mounted() { this.$emit(mounted); } 以上需要手动通过 $emit ...
  • 项目场景: 监听div值的变化监听传值 ... // 监听并向父组件传值 formateTime: { handler: function (val, oldval) { console.log("改变后日期", val, "初始日期", oldval); this.$emit("changeforma
  • 父组件不通过事件监听子组件变化并取值背景介绍:一、子组件中添加监听二、将数据传到store三、getters返回值四、父组件调用getters 背景介绍: 最近在做一个版本数据管理系统,父组件中计算版本总分,需要从子组件...
  • 父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就...另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 <div id="app"> <div id="counter-event-example"&
  • QQ技术交流群173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 ...3.父组件子组件监听emit定义的事件名称并绑定自身的函数,在函数的参数中接收子组件传递的参数。 效果图: 实现代码: &...
  • Angular官方文档Demo地址:>component-interaction#parent-listens-for-child-event ...子组件 imageupload 中的一个事件 onCropped(e:ImgCropperEvent) onCropped(e: ImgCropperEvent) { this.croppedIm...
  • vue父监听子组件触发的事件

    千次阅读 2020-06-03 10:40:38
    vue里面的作用域都是孤立的,不允许在子组件的模板内直接使用父组件的数据....子组件触发事件,使用$emit来遍历自定义的事件"closeSendChange",并且返回参数false,这个自定义事件就相当于一个中转 父组件监听子组件
  • 开始 vue中子组件这一块,有点麻烦。不是说它很难,而是它的传送数据方式,以及和各种前端后端路由混在一起时,如果不清晰很容易就迷茫 下面假设: 路由配置文件为:router.js 父组件为 parent.vue , 路径为 ....父组件中...
  • 1、在父组件中引用子组件 <child @from-child-msg="listenChildMsg"></child > 2、子组件中使用$emit发送事件 this.$emit('from-child-msg', '这是子组件传递的消息'); demo <!...
  • 1.需求 ...父组件需要去监听子组件事件,并接收子组件的传值。 2.解决方法 2.1 子组件的代码 template模板代码 <template> <div> <el-select class="width100" v-model="sele...
  • vue组件之监听子组件事件

    千次阅读 2020-11-07 21:08:31
    在父组件中通过v-on指令监听子组件的自定义事件,然后自定义事件执行 $emit()方法触发父组件事件,这样就可以实现子组件和父组件之间的通信 <div id="app"> <post-item :value="arr" @greet="fatherCl.
  • 比如有父组件 Parent 和子组件 Child,如果父组件监听子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$...
  • 1、子组件 <template> <div>子组件</div> </template> <script>... * 通过@hook 监听 @hook:created="parentMethods2"(created是子组件生命周期) * 父组件事件parentM
  • 子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('...父组件中通过自定义事件监听子组件事件 比如自定义事件名称childlistener 我们通过以下方式在父组件中进行监听: v-on:childlistener="pa...
  • 实现子组件父组件传递点击事件 / 传值 子组件父组件传值使用的是emit方法,详细的组件间传值方法可以参照vue的官方文档~ 在本项目中,子组件为Right,父组件为Experiment,如下图所示: 1、先给子组件绑定一个...
  • 下面小编就为大家分享一篇vue使用$emit时,父组件无法监听子组件事件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 895
精华内容 358
关键字:

子组件监听父组件事件