Vue父子组件传值详解

1、父传子
父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值
其实挺简单的
1、之前变量值是绑定在data中，现在换成在绑定在props 中。
2、props 中的绑定名要和父组件中的相同。

2、子传父
子传父的实现方式就是用了 this.$emit
1、子组件通过事件传值给父组件

2、父组件通过事件接受

3、父子组件传值整体代码
parent.vue

<template>
  <div>
    <child :message="msg" @parent="Fbtn"></child>
    {{msgs}}
    <el-divider>子组件向父组件传值</el-divider>
  </div>
</template>

<script>
  import child from './child'
  export default {
    name: "",
    data: function () {
      return {
        msg: 'This is a Vue project -- 父传子',
        msgs: ''
      }
    },
    components: {
      child
    },
    create: function () {
    }, /*渲染前调用*/
    mounted: function () {
    }, /*渲染后调用*/
    methods: {
      Fbtn(data) {
        this.msgs = data
      },
    }  /*方法*/
  }
</script>

<style scoped>

</style>

child.vue

<template>
  <div>
    <h3>父组件向子组件传值</h3>
    {{message}}
    <el-divider>父组件向子组件传值</el-divider>
    <h3>子组件向父组件传值</h3>
    <el-button type="primary" @click="btn">主要按钮</el-button>
  </div>
</template>

<script>
  export default {
    name: "",
    props: {
      message:''
    },
    data: function () {
      return {
        msg: 'This is a Vue project -- 子传夫'
      }
    },
    create: function () {
    }, /*渲染前调用*/
    mounted: function () {
    }, /*渲染后调用*/
    methods: {
      btn() {
        this.$emit('parent',this.msg)
      },
    }  /*方法*/
  }
</script>

<style scoped>

</style>