VUE 父组件向子组件传值,子组件向父组件传值

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yaoyyl/article/details/78705474

子组件代码

<template>
  <div>
    <h2>child子组件部分</h2>
    <p>{{message}}</p>
    <button v-on:click="sendMsgToParent">向父组件传值</button>
  </div>
</template>

<script>
export default {
  props : ["message"],
  data () {
    return {

    }
  },
  methods:{
    sendMsgToParent:function () {
      this.$emit("listenToChildEvent","传值内容")
    }
  }
}
</script>

<style scoped>

</style>

父组件代码


<template>
  <div>
    <h2>parent父组件部分</h2>
    <child v-bind:message="parentMsg" v-on:listenToChildEvent="showMsgFromChild"></child>
  </div>
</template>

<script>
  import child from './Child'

export default {
  data () {
    return {
      parentMsg:'hello'
    }
  },
  components : {
    child
  },
  methods:{
    showMsgFromChild:function (data) {
      console.log(data);
    }
  }
}
</script>

<style scoped>

</style>




阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页