【Vue3】【很基础】子组件如何向父组件传值？

最新推荐文章于 2024-03-27 14:46:30 发布

star_evan

最新推荐文章于 2024-03-27 14:46:30 发布

阅读量532

点赞数 1

分类专栏： vue3.0学习与项目开发文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/m0_51691013/article/details/118848876

版权

vue3.0学习与项目开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【Vue3】【很基础】子组件如何向父组件传值？

需求：counter数据在父级组件内，子组件是一个按钮，点击子组件可以让父组件的值加一
用html方便演示。

<script src="https://unpkg.com/vue@next"></script>
<body>
    <div id="app"/>
</body>
<script>
    const app = Vue.createApp({
    //这里是父组件
        data() {
            return {
                counter: 0
            }
        },
        template: `<h2>父组件</h2>
<counter :counter="counter"/>
    `
    })
    app.component('Counter', {
        props:['counter'],
        template:`
        <button>{{counter}}</button>
        `
    })
    const vm = app.mount("#app")
</script>
</html>

这是一个尚未实现传值功能的模板。

由于传值的单向性，点击子组件按钮不可以直接控制父组件data内的counter加一，我们可以:

//以上省略
        },
        template: `<h2>父组件</h2>
<counter :counter="counter"/>
    `
    })
    app.component('Counter', {
        props:['counter'],
        data(){return{ newCounter:this.counter}},
     //我们新建一个数据等于this.counter，然后通过操作newCounter来改变counter
        template:`
        <button @click="newCounter++">{{newCounter}}</button>
        `
    })
    const vm = app.mount("#app")
</script>
</html>

新建一个数据等于this.counter，然后通过操作newCounter来改变counter

也可以通过子组件调用父组件方法

<script src="https://unpkg.com/vue@next"></script>
<body>
    <div id="app"/>
</body>
<script>
    const app = Vue.createApp({
    //这里是父组件
        data() {
            return {
                counter: 0
            }
        },methods:{
        //添加了一个方法可以让counter++
        handleAddCounter(){
        this.counter++}
        template: `<h2>父组件</h2>
<counter :counter="counter"/>
    `
    })

现在更改父级组件的值的问题就变成了如何获取父级组件的这个事件

向父组件中子组件标签上添加响应式事件，也就是向子组件传递这个方法
<counter :counter="counter" @anEvent="handleAddCounter"/>

然后如何让子组件接收这个方法？
子组件内

 methods:{
            handleClick(){
                this.$emit('anEvent')
            }
        },

this.$emit(‘anEvent’)就获得了这个自定义事件对应的方法
现在方法进入了handleClick
然后

<button @click="handleClick">{{counter}}</button>

子组件调用就好了

star_evan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue3】【很基础】子组件如何向父组件传值？

【Vue3】【很基础】子组件如何向父组件传值？用html来简单演示。<script src="https://unpkg.com/vue@next"></script><body> <div id="app"/></body><script> const app = Vue.createApp({ //这里是父组件 data() { return {
复制链接

扫一扫