精华内容
下载资源
问答
  • 2021-03-12 16:34:37
    1. vue子组件监听props值变化

      一定要深度监听,不然监听不到

      想过在data里面定义一个变量来盛props的变量,然后常规监听data的变量,发现不可

      监听一个对象

      props:{
        option:Object
      },
      watch: {
          option: {
            deep: true,  // 深度监听
            handler(newVal,oldVal) {
               console.log(newVal,oldVal)
            }
          }
        }
      

      监听对象中的某个值

      props:{
        option:Object
      },
      watch:{
        'option.text'(newVal,oldVal){
              console.log(newVal,oldVal);
        }
      }
      
    更多相关内容
  • Vueprops监听变化的几种方式

    千次阅读 2022-01-27 11:31:02
    vue中父子组件是通过props传递数据的。通常有以下几种场景: 子组件展示父组件传递过来的props,一般是字符串 子组件通过父组件的props计算得到某个值 子组件修改父组件传递过来的props 1.computed 计算属性 ...

    应用场景

    在vue中父子组件是通过props传递数据的。通常有以下几种场景:

    • 子组件展示父组件传递过来的props,一般是字符串
    • 子组件通过父组件的props计算得到某个值
    • 子组件修改父组件传递过来的props

    1.computed 计算属性

    使用场景:当pros传递过来的值不能直接使用的时候,就可以使用计算属性了。
    比如:完整的地址需要将省市区3个字段拼接后展示。

    计算属性是基于依赖进行缓存的,当props不变时,多次访问addrese计算属性,会立即返回结果,而不必再次执行计算。

    props: {
      province: String, // 省
      city: String, // 市
      area: String // 区
    },
    computed: {
      address(){
        return `${this.province}${this.city}${this.area}`
      }
    }
    

    2.methods 方法

    上面计算属性,通过methods也可以实现,但methods不会进行缓存,而且methods通常用来处理业务逻辑。

    3.watch 侦听器

    使用场景:将传递过来的props作为初始值,比如城市选择列表的默认城市,我们希望选择城市时,改变这个值。

    单向数据流

    父级 prop 的更新会向下流动到子组件中。

    当我们需要在子组件中修改父组件传递过来的props时,如果直接更改,vue会报错的,因为如果子组件直接更改父组件的props,会使应用的数据流向难以理解。

    解决方案

    为了不直接修改props的值,可以在data中,用props初始化一个data属性,以后更改这个data属性即可。

    但是这会导致,父组件变化时,该data属性不会更新(注意:只针对基本类型,如果是引用类型,仍旧是变化的。因为引用类型的内存地址没变)

    此时为了更新这个data属性,就需要使用侦听器来监听props的变化。

    深度监听

    使用场景:当监听到某个值变化后,执行异步请求。
    此时computed和methods都不太合适。

    • 基本类型
    watch: {
       msg(newV,oldV) {
         // do something
         console.log(newV,oldV)
       } 
    }
    
    • 引用类型
    1. 计算属性(推荐)
      先通过计算属性得到引用类型的内部某个字段,再使用侦听器监听该字段的变化
      props:{
        config:Object
      },
      computed: {
          isShow() { 
              return this.config.role.isShow
          }
      },
      watch: {
          isShow(newV,oldV) {
              // do something
              console.log(newV,oldV)
          }
      }
    
    1. deep
     props:{
        config:Object
      },
      watch: {
        isShow:{ //深度监听,可监听到对象、数组的变化
            handler (newV, oldV) {
              // do something, 可使用this
              console.log(newV,oldV)
            },
            deep:true
           }
      },
    
    1. 监听对象中的某个值
    props:{
        option:Object
      },
      watch:{
        'option.text'(newVal,oldVal){
              console.log(newVal,oldVal);
        }
    }
    

    关于Vue中watch的详细用法见: https://blog.csdn.net/a1056244734/article/details/120790921

    参考文章:vue props监听变化的几种方式

    展开全文
  • vueprops数据变化的问题

    千次阅读 2022-02-22 21:03:32
    vue项目中,父子组件数据传递是最常见的场景,但是今天在开发过程中父级数据传递到子组件,控制子组件的显隐,发现存在问题,一直监听不到数据变化,详细排查后发现是因为props在传递数据的时候子组件接收到数据...

    发现问题

    在vue项目中,父子组件数据传递是最常见的场景,但是今天在开发过程中父级数据传递到子组件,控制子组件的显隐,发现存在问题,一直监听不到数据的变化,详细排查后发现是因为props在传递数据的时候子组件接收到数据后没有及时发生变化导致的。

    这里使用的是 iview 框架

    // 子组件
    <template>
        <Modal
            v-model="isShowModel"
            title="测试弹窗">
            <p>Content of dialog</p>
            <p>Content of dialog</p>
            <p>Content of dialog</p>
        </Modal>
    </template>
    
    <script>
    export default {
        name: 'TestModel',
        props: {
            showModel: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                isShowModel: this.showModel
            }
        }
    }
    </script>
    
    // 父组件
    <template>
      <div id="app">
        <TestModel :showModel="showModel"></TestModel>
        <Button type="primary" @click="changeShowModel">显示弹窗</Button>
      </div>
    </template>
    
    <script>
    import TestModel from './components/TestModel.vue'
    
    export default {
      components: {
        TestModel
      },
      data() {
        return {
          showModel: false,
        }
      },
      methods: {
        changeShowModel() {
          this.showModel = true;
        }
      }
    }
    </script>
    

    问题分析

    预期效果是点击按钮直接弹出弹窗,结果怎么也弹不出来。子组件中增加 watch 监听 props 发现数据已经变化了,但是 data 中接收 props 数据的变量并未改变,发现问题所在。

    问题原因就是接收 props 数据的变量无法及时响应 props 的变化,下一步解决问题就是重点解决响应变化问题。

    问题解决

    解决方案1

    子组件中增加 watch 监听 props 中传进来的数据变化,同时当子组件数据变化时,数据上传父组件。

    // 子组件
    <template>
        <Modal
            v-model="isShowModel"
            width="1000"
            title="测试弹窗"
            @on-cancel="cancel"    
        >
            <p>Content of dialog</p>
            <p>Content of dialog</p>
            <p>Content of dialog</p>
        </Modal>
    </template>
    
    <script>
    export default {
        name: 'TestModel',
        props: {
            showModel: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                isShowModel: this.showModel
            }
        },
        watch: {
            showModel(v) {
                this.isShowModel = this.showModel
            }
        },
        methods: {
            cancel() {
                this.$emit('cancel', this.isShowModel);
            }
        }
    }
    </script>
    
    // 父组件
    methods: {
        modelCancel(v) {
            this.showModel = v;
        }
    }
    

    解决方案2

    使用 vue 中的计算属性( computed )中的 set 方法。

    // 子组件
    <template>
        <Modal
            v-model="isShowModel"
            width="1000"
            title="测试弹窗"
        >
            <p>Content of dialog</p>
            <p>Content of dialog</p>
            <p>Content of dialog</p>
        </Modal>
    </template>
    
    <script>
    export default {
        name: 'TestModel',
        props: {
            showModel: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            isShowModel: {
                set(v) {
                    this.$emit('cancel', v);
                },
                get() {
                    return this.showModel;
                }
            }
        },
    }
    </script>
    

    有兴趣的兄弟可以关注我的博客 www.maple.ink
    个人博客

    展开全文
  • vue2.0——监听props、vuex变化

    千次阅读 2020-11-19 23:33:34
    监听VUEX变化 首先在想要监听的组件里面 利用computed 注意:一定要return 这里监听一个已经存在vuex里面的liveheader值 computed: { liveheaderfn() { return this.$store.state.liveheader; }, }, 首先在想...

    监听VUEX变化

    首先在想要监听的组件里面 利用computed
    注意:一定要return
    这里监听一个已经存在vuex里面的liveheader值

      computed: {
        liveheaderfn() {
          return this.$store.state.liveheader;
        },
      },
    

    首先在想要监听的组件里面 利用watch
    然后在这个函数里面做你想要做的逻辑即可
    将newValue 赋值给 本组件的一个变量liveheader

      watch: {
        liveheaderfn(newValue) {
          console.log(newValue);
          this.liveheader = newValue
        },
      },
    

    监听props变化

    首先在想要监听的组件里面 利用computed
    接受一下props

      props: ["itemChild"],
    

    注意:一定要return

      computed: {
        itemChildfn() {
          if (this.itemChild != false) {
            return this.itemChild;
          }
        },
      },
    

    利用watch监听变化
    将newValue 赋值给 本组件的一个变量child

      watch: {
        itemChildfn(newValue) {
          this.child = newValue;
        },
      },
    
    展开全文
  • vue props监听变化的几种方式

    千次阅读 2020-12-28 21:14:27
    应用场景在vue中父子组件是通过props传递数据的。通常有以下几种场景:子组件展示父组件传递过来的props,一般是字符串子组件通过父组件的props计算得到某个值子组件修改父组件传递过来的propscomputed 计算属性使用...
  • 使用visible控制隐藏与现实,需要watch,visible变化,执行其他相关操作。 核心代码如下: import { watch, toRefs } from "vue"; const props = defineProps({ visible: { type: Boolean, default: () => { ...
  • VUE中用props子组件监听父组件数据变化 在不使用vuex的情况下,如何监听呢? 一开始想的是在子组件里的data中重定义props中接收的数据,再通过methods中定义的方法来监听,发现不可行,data里重定义的数据并不会...
  • vue3.0 监听props数据回显

    千次阅读 2021-04-12 00:05:39
    import {defineComponent, reactive, watch} from 'vue'; export default defineComponent({ name: "from", props: { record: { type: Object, default: null, } }, setup: function (prop
  • Vue3.0监听props方法

    千次阅读 2021-07-26 20:29:50
    学习vue3.0记录下props监听: 第一种直接监听这个props export default defineComponent({ props: { isOpen: Boolean, }, emits: { "close-modal": null, }, setup(props, context) { watch( props, ...
  • 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state。 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新...
  • 在学习Vue3的时候,在项目实战中,需要用到watch监听props内属性的值的变化 但是却出现了无响应的现象 虽然让他可以响应只需要对watch的监听对象做一点小小的修改,但是我们还是需要研究一下具体为什么某些做法无法...
  • Vue3 watch 侦听 props变化

    千次阅读 2021-11-10 13:55:08
    Vue3 watch 侦听 props变化 - 尹宇星_Kim - 博客园 watch有两种写法 // 侦听一个 getter const state = reactive({ count: 0 }) watch( () => state.count, (count, prevCount) => { /* ... */ } ) ...
  • 前言:长期没有确定props数据同步,今天做一下总结 1.prorps传递的是字符串 父组件传递aa值,并且aa动态修改 子组件接受 测试结果: 可以看出props传值以后是,子组件是可以接受到动态值的。 2.数组测试 3....
  • 在项目中有一个表单用到的地方很多,...但是在开发过程中发现即使使用deep深度监听也无法监听到prop的数据变化,例如下面 <!-- 父组件 --> <template> <div class="hello"> <Child :data="...
  • vue watch 监听 props 传值

    万次阅读 2020-12-04 21:27:07
    props: ["isAdd", "oldusername"], data() { return { username: "", password: "", dialogFormVisible: false }; }, watch: { oldusername: function (newVal, oldVal) { // console.log(newVal); this....
  • 最近在实现一个功能的时候发现,在一个vue页面中组件的部分一直不能展示,看了看代码,展示条件也符合啊,为何展示不出来呢?在仔细看了下逻辑,发现组件只有在接收props中的值发生改变的时候,才会执行下面的逻辑,...
  • vue组件props属性监听不到值变化

    千次阅读 2020-11-24 15:46:32
    在写项目时遇到一个问题,父组件传到子组件的prop,在子组件监听不到变化, 遂查看vue文档,得知watch有一种深度监听的方法。 从vue文档搬运。=》 var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e:...
  • watch中绑定object或array时,数据没有更新(deep);prop的默认值(default)没有触发watch函数(immediate);多个prop更新时触发同一个处理函数watch 方法是什么在Vue中,我们可以[监视属性何时更改]并对响执行一些操作...
  • 父组件:header和sidebar是两个子组件,子组件...父组件能正常收到子组件header的传值,但是子组件sidebar只能收到id的初始值,收不到id变化的值,用watch监听也不触发 实在是不知道问题出在哪里,求大神指教 ...
  • Vue监听数据变化原理

    2021-04-22 11:08:21
    Vue监听数据变化原理 vue2.x版本底层使用Object.defineProperty监听数据变化数据变化后通知观察者observer 我们模拟new Vue()过程初始化一个vue的实例 const vm = new Vue_({ key: '' + Date.now(), data: ...
  • 本文介绍了vueprops,data,computed变化对组件更新的影响,分享给大家,废话不多说,直接上代码 /** this is Parent.vue */ <div>{{'parent data : ' + parentData}} <div>{{'parent to children1 props : ...
  • 使用vue写页面时 用到了props 监听修改,从已有的代码例子照猫画虎,无论如何都不成功。 2、查找vue props 监听的方法 百度程序员开始工作了,https://www.jianshu.com/p/ff708a773dc0 很快啊,就找到了方法,对...
  • vue3 watch监听props里的属性

    千次阅读 2021-10-11 11:26:35
    import { watch } from "vue"; export default { props: { items: { type: Array, require: true } }, setup(props) { watch( () => props.items, (val) => { if (val.length > 4) { console....
  • 今天遇到了一个问题,可能自己习惯写vue3的写法,忘记了vue2中的写法。在此记录一下 我在props中申明了一个接受了父组件传下来的value props:{ value:{ type:String } } 在watch中错误的使用了使用了this...
  • 父组件通过props传递数据对象中的某个属性值给子组件,子组件中watch监听传来的props变化执行某些内容。父组件中循环调用自己嵌套了多层。出现即使修改了传值,watch也没有监听到,而computed可以监听到的情况。我...
  • 然后写一个watch属性监听这个值的变化: immediate属性设置为true,代表在wacth里声明了infoCensus这个方法之后立即先去执行handler方法。 用法是在子组件data里定义一个属性,然后将每次监听到改变时把newVal赋值给...
  • 【笔记】vue3.x watch监听props中的数据

    千次阅读 2021-08-13 15:27:54
    在使用watch监听props中的数据时,发现捕获不到值的变化 我们直接上正确使用的代码。 props: { target: { type: String, default: '' } }, setup(props) { watch( () => props.target, (newVal, oldVal) ...
  • // 由父组件传来的值 model & onLineModelList props: { model: { type: Object, required: true }, onLineModelList: { type: Array, required: true } }, // 监听 onLineM...
  • vuejs监听props

    2021-12-29 20:58:50
    容易犯的一个错误
  • 假设组件拥有 name 参数,下面实现对name的监听 watch( () => props.name, (newVal, oldVal) => { console.log(newVal, oldVal); }, );

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,968
精华内容 12,387
关键字:

vue监听props数据变化

友情链接: 多边形窗口.zip