Vue 父子组件之间传值

父组件向子组件传值

父组件示例

<template>
  <div class="parent">
     <!-- msg为传给子组件的数据 -->
    <children :sendData="msg"></children>
  </div>
</template>
<script>
  import Children from 'components/children'
  export default {
    component:{
      Children
    },
    data(){
      return{
        msg:'传给子组件的数据'
      }
    }
  }
</script>

子组件示例

<template>
  <div class="children">
     {{sendData}}
  </div>
</template>
<script>
  export default {
    props: {
      // 接收父组件传值的变量
      sendData: {
        type: String,
        default: () => {
          return null
        }
      }
    },
  }
</script>

子组件向父组件传值

子组件示例：通过emit方法向父组件传值

// children.vue
<template>
  <div class="children">
    <button @click="emitToParent">点击传值非父组件</button>
  </div>
</template>
<script>
  export default {
    methods: {
      emitToParent() {
        this.$emit('childEvent', '子组件向父组件传递的内容')
      }
    }
  }
</script>

父组件示例：

// parent.vue
<template>
  <div class="parent">
    <!--  子组件中定义的方法 --> <!-- 触发父组件的方法 -->
    <button @childEvent="parentEvent">点击传值给父组件</button>
  </div>
</template>
<script>
  import Children from 'components/children'
  export default {
    component:{
      Children
    },
    methods: {
      // data为子组件传递过来的数据
      parentEvent(data) {
        console.log(data)
      }
    }
  }
</script>