vue子组件修改props传进来的值、回调函数

vue修改props里面的值

1、传统方法，emit触发父组件修改父组件里面的值，间接的修改子组件的值

父组件

<Child :msg="msg"  @handle="handle"></Child>
methods: {
    data() {
        return{
            msg: '这是一段原始数据'
        }
    },
	handle(val) {
         this.msg = "修改之后的值，单向流， 子组件也跟着改变";          
    }
}

子组件

<button @click="changes">修改</button>

props: {
	msg: {
        type: String,
        default: ""  
    }
},

methods: {
	changes() {
         this.$emit('handle', '修改之后的值');
    }
}

2、父组件传值用sync修饰

父组件 传值的时候用sync修饰

<HelloWorld :msg.sync="msg"></HelloWorld>

子组件接值

props: {
	msg: {
       type: String,
       default: ''    
    }
},

methods: {
   // 修改props传进来的值
   handle() {
       this.$emit('update:msg', '修改之后的值');  // 这样父组件就会变化响应的值
   }
}

以上都是针对基本数据类型， 引用数据类型直接在子组件里面改就可以了

回调函数的使用

const test = function(cb) {
	// 自己的业务代码
	cb && cb();
}

// 调用test方法， 传进去一个函数
test(function() {
	console.log('业务代码跑完之后的回调方法');
})