Vue 子父组件互相传值

1.父组件向子组件传递参数

父组件view 部分：

<link-log :log-open="logOpen" :log-content="logContent" @closePop="logOpen = false" />

父组件script 部分

import LinkLog from '../components/LinkLog'

export default {
  name: 'Link',
  components: { LinkLog },
  data() {
    return {
    	logOpen: false,
    	logContent: ''
    }
  }
}

子组件使用props接收父组件的参数：

export default {
  name: 'LinkLog',
  props: {
    logOpen: {
      type: Boolean,
      required: true,
      default: false
    },
    logContent: {
      type: String,
      required: true,
      default: ''
    }
  }
}

2.子组件通知父组件

子组件：

<el-button type="primary" plain @click="closeLogContent">Close</el-button>

closePop就是对应父组件中的@closePop事件，使用$emit通知父组件需要执行这个方法

methods: {
  closeLogContent() {
    this.$emit('closePop')
  }
}