vue父子通讯

父传子

下面是子组件

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>
相关推荐
独立开阀者_FwtCoder3 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder4 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep11 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛16 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i25 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟29 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览33 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少35 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z1 小时前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠1 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro