vue父子传值----dialog组件

说明：工作遇到页面，有产品协议，点击可以查看协议文章。
需求：协议内容，放在页面中太占地方了，所以封装成组件。

<sign-agreement v-if="myVisible" ref="signAgreement" @agreeMethod="agreeMethod"></sign-agreement>

import SignAgreement from './agreement'

  components: {
    SignAgreement
  },

myVisible:false

showAgree () {
      this.myVisible = true
      this.$nextTick(() => {
        this.$refs.signAgreement.init()
      })
    },
    agreeMethod () {
      this.myVisible  = false
    }

子组件:
<template>
  <el-dialog class="add-sign" :visible.sync="visible"  :modal="true" :close-on-click-modal="false"
    :close-on-press-escape="false" title="协议内容" center width="1100px">
    <div class="deal-content">
      <h4>一、 须知</h4>
      <p>第一条 惺惺惜惺惺想寻寻寻为准。</p>
    </div>
    <div>
      <el-button type="primary" @click="ok()">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      visible: false
    }
  },
  methods: {
    init () {
      this.visible = true
    },
    ok () {
      this.$emit('agreeMethod')
    }
  }
}
</script>
<style lang="scss" scoped>
h4 {
  margin: 1px;
}
</style>