父 -> 子的数据传递
使用 Props
传递数据
父组件
<template>
<div class="parent">
<son :number="num"></son>
</div>
</template>
<script>
import son from './children/son'
export default {
name: 'parent',
data () {
return {
num: 1
}
},
components:{
son
}
}
</script>
子组件
<template>
<div class="son">
{{number}}
</div>
</template>
<script>
export default {
name: 'son',
props:{
number:Number
}
}
</script>
子组件显示 0
动态 Props
修改父组件
<template>
<div class="parent">
<son :number="num"></son>
</div>
</template>
<script>
import son from './children/son'
export default {
name: 'parent',
data () {
return {
num: 1
}
},
mounted () {
setTimeout(() => {
this.num = 99;
}, 3000);
},
components:{
son
}
}
</script>
子组件先显示 0, 3 秒后显示 99
子 -> 父的数据传递
自定义事件
父组件
<template>
<div class="parent">
<son :number="num" @reset="resetNum"></son>
</div>
</template>
<script>
import son from './children/son'
export default {
name: 'parent',
data () {
return {
num: 0
}
},
mounted () {
setTimeout(() => {
this.num = 99;
}, 3000);
},
methods: {
resetNum (data) {
this.num = data;
}
},
components:{
son
}
}
</script>
子组件
<template>
<div class="son">
{{number}}
<button @click="reset">reset</button>
</div>
</template>
<script>
export default {
name: 'son',
props:{
number:Number
},
methods: {
reset () {
this.$emit('reset', 0)
}
}
}
</script>
此时, 子组件初始显示 0, 3 秒后显示 99, 点击 reset
重新显示 0
.sync 修饰符
实现双向数据绑定的语法糖
父组件
<template>
<div class="parent">
<son :number.sync="num"></son>
</div>
</template>
<script>
import son from './children/son'
export default {
name: 'parent',
data () {
return {
num: 0
}
},
mounted () {
setTimeout(() => {
this.num = 99;
}, 3000);
},
components:{
son
}
}
</script>
子组件
<template>
<div class="son">
{{number}}
<button @click="reset">reset</button>
</div>
</template>
<script>
export default {
name: 'son',
props:{
number:Number
},
methods: {
reset () {
this.$emit('update:number', 0)
}
}
}
</script>