- 使用
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>