精华内容
下载资源
问答
  • vue子组件监听父组件传值的变化并随之改变
    千次阅读
    2021-06-29 14:39:36

    思路:在子组件中使用watch来监听数据的变化。

    1.父组件向子组件传值,将dataMsg传递给子组件

    <child  :data-msg="dataMsg"></child>
    

    2.子组件props接收dataMsg,watch监听dataMsg的变化

    props: {
        dataMsg: {
          type: String, // 这里你接收的值是什么类型就写什么类型
          default: ''" // 接收值的默认值,如果为数组就写[],对象就写{}
        }
      },
    
    watch: {
      dataMsg(newVal, oldVal){
        // newVal是新值,oldVal是旧值
        this.dataMsg = newVal
      }
    ]
    
    更多相关内容
  • Vue子组件监听父组件的事件

    千次阅读 2020-11-21 22:53:05
    正常情况下,组件可以监听组件传递过来的...示例一:整个组件监听事件 <template> <div @click="changeVisiable"> <slot></slot> <div v-show="visiable">显示隐藏的内容</div

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

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

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

    <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-10-20 13:23:01
    vue子组件监听父组件传值


    父组件通过 props传值给子组件,当父组件传值发生了变化,我们期望子组件数据相应进行变化。方法较多,我们一一介绍。

    先写一个简易的父组件

    // 父组件template内容
    <button @click="addData">addDataButton</button>
    
    // 引用的子组件内容
    <data-list-item :dataList="dataList"></data-list-item>
    
    // 父组件data中定义内容
    dataList: [],
    
    // 父组件methods内容
    addData() {
      this.dataList.push({
        name: this.dataList.length,
      })
    }
    

    再写一个简易的子组件

    // 子组件template内容
    <ul>
      <li></li>
    </ul>
    
    // 子组件props中内容
    props: ['dataList'],
    

    props

    直接使用父组件传递的props变量

    // 子组件template内容
    <ul>
      <li v-for="(list, index) in dataList" :key="index">{{ list.name }}</li>
    </ul>
    

    在这里插入图片描述
    我们可以看出来随着父组件数据的变化,props传递的字段dataList值动态变化。但这样存在一个弊端,就是在子组件中无法根据各类条件进一步处理传递的数据,所以我们更倾向于下一种。

    data

    props中的值赋给data中定义的变量

    // 子组件template内容
    <ul>
      <li v-for="(list, index) in childDataList" :key="index">{{ list.name }}</li>
    </ul>
    
    // 子组件data中定义内容
    childDataList: this.dataList,
    

    在这里插入图片描述
    在vue调试工具中我们可以轻易看到,当我们点击按钮,props中的值进行相应变化,同时data中定义的变量值也同步变化。

    computed

    如果父组件传递的值,在给定的初始条件即可完成数据的处理,那我们可以使用computed

    // 子组件template内容
    <ul>
      <li v-for="(list, index) in childDataList" :key="index">{{ list.name }}</li>
    </ul>
    
    // 子组件computed中定义内容
     childDataList() {
       return this.dataList
     },
    

    在这里插入图片描述
    在vue调试工具中我们可以轻易看到,当我们点击按钮,props中的值进行相应变化,同时computed中定义的变量childDataList也同步变化。

    watch

    采用watch监听父组件传值也是常用的方法。
    watch可以直接监听变化的传值类型为基本数据类型,引用数据类型可以监听Array,但是对引用数据类型中 instanceOf 为 Object监听则不是很理想,需要使用watch中的深度监听。

    普通监听

    // 子组件template内容
    <ul>
      <li v-for="(list, index) in childDataList" :key="index">{{ list.name }}</li>
    </ul>
    
    // 子组件data中定义内容
    childDataList: [],
    
    // 子组件watch中定义的内容
    dataList(val) {
     console.log('dataList change', val)
      this.childDataList = val
    },
    

    在这里插入图片描述
    在这里插入图片描述
    可以看到随着父组件按钮的点击,子组件对父组件的传值监听会执行,同时改变子组件data中定义的childDataList值。这种方式的问题是,如果一开始父组件即传值过来,而watch是监听到变化才执行,则导致子组件无初始值。可以采用下面深度监听的写法,开启immediatetrue

    深度监听

    修改下之前的父组件和子组件内容

    // 父组件template内容修改
     <button @click="changeData">changeDataButton</button>
     <data-list-item :dataObj="dataObj"></data-list-item>
    
    // 父组件data内容修改
    dataObj: {
      name: 'caoyuan',
      age: 24,
      sex: 'man',
    },
    
    // 父组件methods内容修改
     changeData() {
       this.dataObj.name = this.dataObj.name + Math.random()
     },
    
    // 子组件template内容修改
    <div>
      {{ personalInfo.name }}
    </div>
    
    // 子组件data内容修改
    personalInfo: {},
    
    // 子组件props修改
    props: ['dataObj'],
    
    // 子组件watch修改
    watch: {
      dataObj: {
        handler(val) {
          console.log('dataObj deep change', val)
          this.personalInfo = val
        },
        deep: true, // 深度监听
        immediate: true, // 初次监听即执行  
      },
    },
    
    

    通过上面的方式,即可解决watch监听带来的一些问题

    优化watch监听

    若是只对object中特定字段进行监听,则可以采用下面方式

    watch: {
      'dataObj.name': {
        handler(val) {
          console.log('dataObj.name change', val)
          this.personalInfo = this.dataObj
        },
        immediate: true, // 初次监听即执行  
      },
    },
    

    这种方式消除深度监听对性能的消耗

    展开全文
  • 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()
                    }
                },
    
    展开全文
  • 本篇文章主要介绍了vue2.x 父组件监听子组件事件并传回信息的方法,具有一定的参考价值,有兴趣的可以了解一下
  • 主要介绍了Vue父组件监听子组件生命周期,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue 子组件watch监听不到prop的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 前言 // files已上传的文件 ...利用watch监听父组件传过来的某个数据变化,结果监听不到,搜索半天,尝试半天,发现这种方式只能监听基础类型的变量而这传递的是个数组。所以查了下还是做个总结吧。 普通基础
  • 下面小编就为大家分享一篇vue使用$emit时,父组件无法监听子组件事件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue子组件监听父组件传递值的变化

    千次阅读 2021-01-18 11:51:06
    这是要从父组件接收的值 props: { active: { type: [String, Number], default: 0, } }, 使用watch对active进行监听 值变化会触发handler方法 watch: { active: { immediate: true, handler(value) { ...
  • vue子组件监听父组件传值

    千次阅读 2020-06-23 13:36:35
    在工作过程中,经常碰见自己封装的组件需要监听父组件传过来的值,很有可能是在子组件需要对值进行处理,有不少同学不知道如何处理这个值,以下是简单demo,仅供参考。。。 父组件: <template> <div&...
  • Vue子组件监听父组件传值

    千次阅读 2019-12-11 09:43:09
    父组件xiaozhushouInput.vue引用子组件xianshidaan.vue <template> <xianshidaan v-show="!isxsinput" @watchChild="parentReceive" v-bind:searchdatas="searchdatas"></xianshidaan> </...
  • vue 子组件监听父组件属性变化

    千次阅读 2019-07-31 11:06:38
    父组件 <timepart-group @timepart-call="timePartChange" :bindId="pat.bindId"></timepart-group> 子组件 function initVueTimePart(){ return { template : $timePart[0].inner...
  • 组件 props : [“data”], 子组件监听 watch:{ data : (n ,o) =&gt; {//箭头函数 不然会发生this改变 console.log(n.img) this.imgs = n.img } }
  • 参考博客
  • Vue子组件如何监听父组件值的变化

    千次阅读 2021-04-04 10:48:11
    子组件中利用watch监听父组件值的变化 // 子组件 props: ["a"], watch: { a(oldValue, newValue) { // oldValue a旧值 // newValue a新值 } }
  • vue 父组件监听子组件

    2021-11-04 12:39:58
    子组件中通过emit来向父组件传值 例子:子组件点击缩进菜单,父组件菜单栏变窄 子组件 navheader 的内容: <div class="left" @click="collapse"> <i :class="isCollapse ? 'el-icon-s-unfold' : '...
  • 主要介绍了Vue如何实现监听组件原生事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • Vue子组件触发父组件事件

    千次阅读 2020-08-04 15:48:25
    父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就...另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 <div id="app"> <div id="counter-event-example"&
  • 方法一:子组件监听父组件发送的方法 方法二:组件调用组件方法 组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('...
  • 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1、常见的使用场景 ... watch:{ value(val) { console.log(val); this.visible = val; } } ... •2、如果要一开始就执行 ... watch:...
  • Vue子组件监听父页面值得变化

    千次阅读 2019-11-11 21:10:17
    其中环装图为子组件,滑块为页面元素 目录 main.js import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import echarts from 'echarts' ...
  • 1.需求 ...父组件需要去监听子组件事件,并接收子组件的传值。 2.解决方法 2.1 子组件的代码 template模板代码 <template> <div> <el-select class="width100" v-model="sele...
  • 今天小编就为大家分享一篇使用vue.js在页面内组件监听scroll事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue父组件监听子组件值变化

    千次阅读 2021-04-22 15:28:13
    子组件组件 1.通过this.$emit(‘方法’,监听的值) this.$emit('changeName',this.nackName) 2.父组件 // 子组件 <component @changeName="nickName" /> // 父组件方法 methods:{ nickName(name) { // 给...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,665
精华内容 28,266
关键字:

vue子组件监听父组件事件