- 使用
v-model
传值,在子组件中 ,使用value接收 ,在子组件中 触发input方法 就可修改父组件传递过来的参数
<template>
<div>
<Child v-model="show"></Child>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
<script>
export default {
props: {
value: {
type: Boolean,
default: false
}
},
methods:{
changeValue(){
this.$emit('input', true)
}
}
}
</script>
- 使用.sync 修饰符 给组件传值的时候 使用.sync修饰符 子组件就可以同步修改父组件内容(.sync在2.0以后被移除,之后 从 2.3.0 起又重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。)
<template>
<div>
<Child show.sync="show"></Child>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
}
},
methods:{
changeValue(){
this.$emit('update:show', true)
}
}
}
</script>