美文网首页
vue的子组件向父组件传递消息

vue的子组件向父组件传递消息

作者: 6cc89d7ec09f | 来源:发表于2018-04-05 14:37 被阅读34次

子组件

<script>
export default {
  name: 'componentA',
  data () {
    return {
      msg: 'msg from componentA',
      message:'',
    }
  },
  props:['msgfromfather'],
  methods:{
    clickme:function(){
      // console.log(this.msgfromfather),
      this.$emit("child-tell-me-something",this.msg);
    }
  }
}
</script>

父组件

<template>
  <div id="app">
    <p>{{msg}}</p>
    <component-a msgfromfather='you die' 
    v-on:child-tell-me-something='listenToMyBoy' ></component-a>
    <p>child say :{{childWords}}</p>
  </div>
</template>

<script>
  import componentA from "./components/componentA"

  export default{
    data:function(){
      return {
        msg:'father',
        childWords:'',
      }
    },
    components:{componentA},
    methods:{
      listenToMyBoy:function(hehe){
        
        console.log(hehe+'')
        this.childWords = hehe
      }
    }
  }
</script>

相关文章

  • vue父子组件传递数据方法

    标签(空格分隔): vue 父组件向子组件传递数据 Vue中父组件向子组件传递数据用props 举个例子 父组件中...

  • vue笔记9.20

    在vue中父组件向自子组件传递props子组件向父组件传递属性是用$emit shopping: 浏览器打开: 子...

  • vue组件嵌套(模态框)

    在vue中父组件向自子组件传递props; 子组件向父组件传递属性是用$emit(发布订阅); 实例基本逻辑:点击...

  • vue组件间通信

    vue组件间通信 1.父组件向子组件传递数据--props 在vue2.0中使用props实现向子组件传递数据: ...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • Vue父组件调用子组件事件

    Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父...

  • vue常见面试题

    1.vue优点 2.vue父组件向子组件传递数据? 3.子组件像父组件传递事件 4.v-show和v-...

  • # Vue组件二-事件反馈 - 子组件向父组件发送消息,父组件监

    Vue组件二-事件反馈 - 子组件向父组件发送消息,父组件监听消息 开始 Vue组件是学习Vue框架最比较难的部分...

  • vue2.0中子组件向父组件传递消息

    vue中子组件向父组件传递消息 核心方法 当子组件中调用vm.$emit('event-name','messag...

网友评论

      本文标题:vue的子组件向父组件传递消息

      本文链接:https://www.haomeiwen.com/subject/smtdhftx.html