Vue组件—子组件修改由父组件传来的数据

最新推荐文章于 2024-05-22 16:09:12 发布

圆内~搁浅

最新推荐文章于 2024-05-22 16:09:12 发布

阅读量414

点赞数

文章标签： js vue

本文链接：https://blog.csdn.net/qq_45626867/article/details/107801432

版权

代码

add(){
                this.demo++;

            },

报错
在这里插入图片描述

解决方法

向父组件发射数据并且在父组件修改
1.子组件方法里加上以下代码

this.$emit("itemclick",this.demo);

2.父组件接收数据并且修改

this.con++;

修改后代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子组件通信-父传子</title>
<style>
    [v-cloak]{
        display: none;
    }



</style>



</head>
<body>
<div id="app" v-cloak>
    <h1>{{con}}</h1>
    <cnp :demo="con"></cnp>
    <cnp :demo="con" @itemclick="add" @itemclick01="re"></cnp>
</div>

<template id="cnp">
    <div>
        <button @click="add">+</button>
        <h1 >{{demo}}</h1>
        <!-- <ul>
            <li v-for="i in demo">{{i}}</li>
        </ul> -->
        <button @click="re">-</button>

    </div>
</template>
<script src="vue/vue.js"></script>
<script>
    const con=Vue.extend({
        template:"#cnp",
        
        props:{
            demo:{
                show:true
            }
        },
        data(){
            return {aa:3};
        },
        methods:{
            add(){
                // this.demo++;
                this.$emit("itemclick",this.demo);

            },
            re(){
                // this.demo--;
                this.$emit("itemclick01",this.demo);
            }
        }
    });
    var app=new Vue({
        el:"#app",
        data:{
            message:"您好",
            arr:["1","3","5","7","7"],
            con:0
        },
        components:{
            cnp:con
        },
        methods:{
            add(aa){
                console.log(aa);
                this.con++;
            },
            re(bb){
                // this.demo--;
                this.$emit("itemclick01",this.demo);
                this.con--;
            }
        }

    })
  
</script>
</body>
</html>

圆内~搁浅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件—子组件修改由父组件传来的数据

代码add(){ this.demo++; },报错解决方法向父组件发射数据并且在父组件修改1.子组件方法里加上以下代码this.$emit("itemclick",this.demo);2.父组件接收数据并且修改this.con++;
复制链接

扫一扫