zoukankan      html  css  js  c++  java
  • 父组件监听本地vuex中的数据,然后传递给子组件,子组件也要监听才能变化

    //父组件
    <heart-wear-connection :isShouhuan="isShouhuan"></heart-wear-connection>
    watch: {
    	    getwear: function(a, b) {
    			console.log("修改后为:" + a);
    			if(a === 'y'){
    				this.$nextTick(function(){
    					this.isShouhuan = true
    				})
    			}else{
    				this.$nextTick(function(){
    					this.isShouhuan = false
    				})
    			}
    	    }
    	},
    	computed:{
    		getwear() {
    			return this.$store.state.ifLinkWatchSuccess
    		}
    	},
    
    
    
    子组件
    <view style="font-size: 26upx;padding-top: 10upx;color: #999999;" v-if="!isShouhuan1">
    				未连接
    			</view>
    			<view style="font-size: 26upx;padding-top: 10upx;color: #30D969;" v-else>
    				已连接
    			</view>
    
    		props: {
    			isShouhuan: {
    				default: true,
    				type: Boolean
    			}
    		},
    		watch: {
    			isShouhuan: {
    				immediate: true,    // 这句重要
    				handler (val) {
    				  this.isShouhuan1=val
    				}
    			}
    		},
    		data() {
    			return {
    				isShouhuan1: this.isShouhuan,
    			}
    		},
    

      使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

    比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true

    watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听
    当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

  • 相关阅读:
    PCB打样前的注意事项
    STM32CubeMX新建工程+基本IO配置过程
    unicode gbk 转换函数
    16进制数字转换为字符
    字符转换为16进制数字
    System.IO.Directory类
    C# DataSet和DataTable详解
    DataGridView 控件详细解说
    关于Datagridview控件用法的一些总结(设置列chicun)
    获取DataGridView中的的选中行
  • 原文地址:https://www.cnblogs.com/fdxjava/p/13209273.html
Copyright © 2011-2022 走看看