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

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

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

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

    <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)//接收的数据--------->我是子组件中的数据
    }
    
    展开全文
  • 比如有父组件 Parent 和子组件 Child,如果父组件监听子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue // Child.vue mounted() { this.$emit(mounted); } 以上需要手动通过 $emit ...
  • 父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就...另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 <div id="app"> <div id="counter-event-example"&

    父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!

    我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:

    使用 $on(eventName) 监听事件
    使用 $emit(eventName) 触发事件
    另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

    <div id="app">
        <div id="counter-event-example">
          <p>{{ total }}</p>
          <button-counter v-on:increment="incrementTotal"></button-counter>
          <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
    </div>
     
    <script>
    Vue.component('button-counter', {
      template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        incrementHandler: function () {
          this.counter += 1
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#counter-event-example',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
    </script>
    
    展开全文
  • Vue子组件父组件传值 需要使用自定义事件 流程: 1.子组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的值传给父组件 3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数,...
  • 子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('...父组件中通过自定义事件监听子组件事件 比如自定义事件名称childlistener 我们通过以下方式在父组件中进行监听: v-on:childlistener="pa...
  • 比如有父组件 Parent 和子组件 Child,如果父组件监听子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$...
  • Vue子组件父组件传值 需要使用自定义事件 流程: 1.子组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的值传给父组件 3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数,在...
  • 子组件中,我们可以通过以下方式监听事件:v-on:click="$emit('funcName',a)"如果需要传多个参数,可以通过以下方式:v-on:click="$emit('funcName',{a,b...})"父组件中通过自定义事件监听子组件事件比如...
  • 1、子组件 <template> <div>子组件</div> </template> <script>... * 通过@hook 监听 @hook:created="parentMethods2"(created是子组件生命周期) * 父组件事件parentM
  • 本篇文章主要介绍了vue2.x 父组件监听子组件事件并传回信息的方法,具有一定的参考价值,有兴趣的可以了解一下
  • 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.
  • 第一种方法是在子组件里用emit向父组件触发一个事件,父组件监听这个事件就行了。具体就是子组件触发emit向父组件触发一个事件,父组件监听这个事件就行了。 具体就是子组件触发emit向父组件触发一个事件,父组件...
  • Vue子组件调用父组件的方法 --转载第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。第三种是父组件把方法传入...
  • vue子组件调用父组件的方法 在子组件里用$emit向父组件触发一个事件,父组件监听这个事件即可 父组件 <template> <div> <child @fatherFunc="fatherFunc"></child> </div> </...
  • vue 父组件中的子组件发生事件子组件可以通过$listeners来监听父组件子组件发生的事件并且可以传递给父组件参数,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • 组件之间传值 父组件子组件传值使用props,参考:父组件子组件传值!...在父组件中使用v-on监听子组件中我们自定义的数组,并为其在父组件中定义一个接收监听事件父组件中接收数据 老规矩,看
  • 在我们开发组件时,它的一些功能可能要求我们和...在其父组件中,我们可以通过添加一个postFontSize数据属性来支持这个功能:new Vue({el: '#blog-posts-events-demo',data: {posts: [/* ... */],postFontSize: 1}}...
  • 组件通信 子组件父组件的方法 ...通过 $emit 触发一个事件,父组件监听这个事件 通过 prop 传入父组件的方法 父组件 Home.vue <template> <div class="bor"> <h3>{{title}}<...
  • 子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 举例: 子组件: <template> <div> <el-...

空空如也

空空如也

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

vue子组件监听父组件事件

vue 订阅