父传子
下面是子组件
html
<template>
<h1>{{ count }}</h1>
</template>
<script>
expose default {
name:'HelloWorld',
props: {
count:{
type:[String,Number],
default:"100"
}
}
}
</script>
子组件使用Props发送
父组件接收:
html
<template>
<div id = "app">
<HelloWorld count = 100></HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
}
}
</script>
子传父
eg:每个商品选中后,把价钱传给父组件,然后结算。
html
<template>
<h1>{{ count }}</h1>
<button @click="handler">按钮</button>
</template>
<script>
expose default {
name:'HelloWorld',
props: {
count:{
type:[String,Number],
default:"100"
}
},
data () {
return {
childCount: 0
}
},
methods: {
handler () {
this.childCount++,
this.$emit('child-count-change',this.childCount)
}
}
}
</script>
父组件:
html
<template>
<div id = "app">
<HelloWorld count = 100,@child-count-change="handler"></HelloWorld>
<h1>{{ childData }}</h1>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data () {
childData: 0
}
methods: {
handler (childCount) {
this.childData = childCount
}
}
}
</script>