vue子组件修改props传进来的值、回调函数
vue修改props里面的值1、传统方法,emit触发父组件修改父组件里面的值,间接的修改子组件的值父组件<Child :msg="msg"@handle="handle"></Child>methods: {data() {return{msg: '这是一段原始数据'}},handle(val) {this.msg = "修改之后的值,单向流, 子组件也跟着改变";
·
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('业务代码跑完之后的回调方法');
})
更多推荐
已为社区贡献1条内容
所有评论(0)