vue中子组件改变父组件数据的两种方法

方法一：这个方法不用在父组件那里写自定义事件，对于处理一些小数据简单易用<body><div id="app"><child :mag.sync='msg'></child>msg:{{msg}}</div></body&am

努力_才幸福

3488人浏览 · 2018-07-19 14:05:33

努力_才幸福 · 2018-07-19 14:05:33 发布

方法一：这个方法不用在父组件那里写自定义事件，对于处理一些小数据简单易用

<body>
    <div id="app">
        <child :mag.sync='msg'></child>
        msg:{{msg}}
    </div>
</body>
<script>  
    Vue.component('child',{
        template:`
            <div>
                <button @click="open">点击我</button>
            </div>
        `,
        prop:['msg'],
        data:function(){
            return{
                mag:this.msg
            }
        },
        methods:{
            open(){
                console.log(this.mag);
                this.$emit('update:mag',true);
            }
        }
    })
 new Vue({
        el:'#app',
        data:{
            msg:'hello world',
        },
        methods:{
            toshow(msg){
                this.msg=msg;
            }
        }
    })
</script>

方法二：通过自定义事件

<body>
    <div id="app">
        <child2 :msg='msg' @showbox="toshow"></child2>
        msg:{{msg}}
    </div>
</body>
<script>  
    Vue.component('child2',{
        template:`
            <div>
                <button @click="open">点击我2</button>
            </div>
        `,
        prop:['msg'],
        data:function(){
            return{
                msg:this.msg
            }
        },
        methods:{
            open(){
                console.log(this.msg);
                this.$emit('showbox',true);
            }
        }
    })
    new Vue({
        el:'#app',
        data:{
            msg:'hello world',
        },
        methods:{
            toshow(msg){
                this.msg=msg;
            }
        }
    })
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^