关于props传值有可能为undefined的情况

2020-12-03 5,238 阅读1分钟

场景：有时你从父组件通过props传给子组件的值是异步获取的，而子组件是在父组件渲染的时候就已经渲染好了的，这时在子组件中使用props传的值的时候可能会遇到undefined的情况。

父组件

<parent>
	<child :name="name"></child>
</parent>
script如下：
methods: {
	getAsyncData(){
      setTimeout(() =>{
          this.name = '张三';  // 传给子组件的值是异步获取的
          this.$refs.child.dialogVisible(); // 调用子组件的方法
      });
    }
}

子组件：

data() {
	dialogVisible: false
},
props: {
	name: ''
}

methods: {
	dialogVisible(){
    	this.dialogVisible = true;
    	console.log(this.name); // 此时打印出的值有可能为undefined,因为此时name还没接收到
    }
}

解决办法：方案一：

dialogVisible(){
    	this.dialogVisible = true;
        this.$nextTick(() =>{ // 在下一个tick中获取
        	console.log(this.name);
        });
    }

方案二：

dialogVisible(name){
    	this.dialogVisible = true;
        this.name = name; // 不用props传值，这样就不存在时序问题了
        console.log(this.name);
    }