Athony1

vue 子组件向父组件传值
在父亲vue component里面 通过绑定v-on事件名来触发相应的方法 这里的toFatherData是子...
扫描右侧二维码阅读全文
21
2019/07

vue 子组件向父组件传值

  • 在父亲vue component里面
  • 通过绑定v-on事件名来触发相应的方法
  • 这里的toFatherData是子组件注册的事件
<template>
  <div>
      我是爸爸:{{message}}
      <br>
      儿子传来的值:{{sendSonMessage}}
      <hr>
      <Son :toSonData="toSonData" @toFatherData="sendSonData"></Son> 

  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  data() {
    return {
      message : "儿子你好",
      toSonData: "大嘴巴子",//给子组件的值
      sendSonMessage: ""
    };
  },

  components: {
    Son
  },
  methods:{
    sendSonData(data){
      this.sendSonMessage=data;
    }
  }
};
</script>
<style lang='scss' scoped>
</style>
  • 在儿子vue component里面
<template>
  <div>
    我是儿子:{{message}}
    <br>
    爸爸给我的礼物:{{toSonData}}
    <br>
    <button @click="toFatherData">给爸爸传值</button>
  </div>
</template>

<script>
export default {
  // props:["toSonData"],//第一种方式
  props:{//第二种方式
    toSonData:{
      type:String,
      default:function(){
        return ""
      }
    }
  },
  data () {
    return {
      message : "爸爸你好"
    };
  },
  methods:{
    toFatherData(){
      this.$emit("toFatherData","给爸爸的爱")
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
最后修改:2019 年 07 月 28 日 12 : 06 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

© 2018-2019 Copyright   | 浙ICP备18047860号-1| SiteMap