网站建设包括哪些方面_智博常州网站建设_seo优化的网站_百度小说排行榜风云榜

父传子

下面是子组件

<template>
<h1>{{ count }}</h1>
</template>
<script>
expose default {name:'HelloWorld',props: {count:{type:[String,Number],default:"100"}    }
}</script>

子组件使用Props发送

父组件接收：

<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：每个商品选中后，把价钱传给父组件，然后结算。

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

父组件：

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