vue 组件传值的问题

Question

题目描述

在按照视频教程学习vue的组件通讯时,实现如下效果:

点击第一行文字,所有文字都变成dell,
点击第二行文字,所有文字都变成lenov
但是我做出来的效果,第一行点击变成dell之后,再点击第二行就没反映了
附代码:

<div id="app">
        <child content="dell"></child>
        <child content="lenov"></child>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    Vue.prototype.bus=new Vue();

    Vue.component('child',{

        data:function() {
            return {
                cont:this.content
            }
        },
        props: {
            content:{
                type:String,
                // default:"it is default"
            }
        },
        template:"<div @click='handleClick'>{{cont}}</div>",
        methods: {
            handleClick:function(){
                this.bus.$emit('change',this.cont);
            }
        },
        mounted: function() {
            var that=this;
            this.bus.$on('change',function(msg){
                that.cont=msg
            })
        }
    })

    var vm=new Vue({
        el:"#app",
        
    })
</script>

大家看一下我的代码有什么问题,需要怎么修改

Answer 1

点击第一行 触发事件handleClick
然后通知change事件 传入参数cont值dell
你定义的两个change事件被触发 改变当前组件的cont值为dell
这时候你不管点击哪一个因为cont值都为dell change是触发了但是还是自身的值 所以不会改变

this.bus.$emit('change',this.content);

将传入的值改为prop的content因为这个值你从一开始传入就没有改变过