您现在的位置:首页 >> 前端 >> 内容

vue子组件改变父组件数据有哪几种方法?

时间:2018/5/9 14:43:37 点击:

  核心提示:今天再看github上别人的项目时发现一个vue的小细节,之前没有见过特写一篇文章记录一下,小细节为方法二。方法一子组件代码templatep @click=open/p/templatemethod...

今天再看github上别人的项目时发现一个vue的小细节,之前没有见过特写一篇文章记录一下……,小细节为方法二。

方法一

组件代码

<template>

    <p @click="open"></p>

</template>

methods: {

   open() {

        this.$emit('showbox',true); //触发showbox方法,true为向父组件传递的数据

    }

}

父组件

<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法

<p>{{ msg }}</p>

data () {

    return {

      msg: false,

    }

},

methods: {

    toshow(msg) {

        this.msg = msg;

    }

}

方法二

这个方法不用在父组件那里写自定义事件,对于处理一些小数据简单易用,推荐方法一(毕竟更形象直观) 

子组件代码

<template>

    <p @click="open"></p>

</template>

methods: {

   open() {

        this.$emit('updata:mag',true); //触发showbox方法,true为向父组件传递的数据

    }

}

父组件

<child :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法

<p>{{ msg }}</p>

data () {

    return {

      msg: false,

    }

},

methods: {

    toshow(msg) {

        this.msg = msg;

    }

}

Tags:VU UE E子 子组 
作者:网络 来源:唯一的切慕,唯一的诗