vue脚手架父子组件传参(element-ui)

vue父子组件传参，以element-ui框架中的对话框组件(dialog)为例，具体做法就是把对话框中的内容抽出去变成单独一个组件，不是和点击展示对话框按钮放在同一个页面。
组件传值就是要清楚自己要传什么值过去，这里我们只传一个：
1 dialogVisible ：控制对话框的显示和隐藏的状态，初始值为false

如果直接把官网上的东西全部搬过来，这样肯定没问题，像下面

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },

但如果我把对话框写在另一个vue文件中，要怎么把dialogVisible传过去，这是文件结构

代码：test.vue为父组件，DialogModel.vue为子组件

test.vue:首先我们都知道对话框的显隐是由属性dialogvisible控制，所以分开写后要把这个组件传到子组件中，这就是父传子，所以子组件要用props来接收这个属性

<div>
    <el-button type="text" @click="showDialog">点击打开 Dialog</el-button>
    <dialog-model :dialogVisible="cDialogVisible" ></dialog-model>
 </div>

<script>
import DialogModel from "./DialogModel.vue"
  export default {
     
     
    components:{
     
     
      DialogModel
    },
    data(){
     
     
      return{
     
     
        cDialogVisible:false
      }
    },
    methods:{
     
     
      showDialog(){
     
     
        this.cDialogVisible=true;
        console.log("this.cDialogVisible",this.cDialogVisible)
      },
    }
  }
</script>

DialogModel.vue:子组件中用props属性来接收

<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDia">取 消</el-button>
        <el-button type="primary" @click="confirmDia">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
     
     
    props:{
     
     
      dialogVisible:{
     
     
        type:Boolean,
        default:false
      }
    },
    methods:{
     
     
      cancelDia(){
     
     
        this.dialogVisible=false;
      },
      confirmDia(){
     
     
        this.dialogVisible=false;
      }
    }
  }
</script>

<style lang="css" scoped>

</style>

完成上面，组件的父传子就完成了，但是如果此时我们点击话框的确认和取消按钮，会报下面的错误

所以接下来就是子组件向父组件传值了，要利用自定义事件
父组件： 父组件中@myevents="deveilydata"就是自定义事件

<template>
  <div>
    <!-- <h1>test</h1>
    <el-button type="primary">主要按钮</el-button> -->
    <el-button type="text" @click="showDialog">点击打开 Dialog</el-button>
    <dialog-model :dialogVisible="cDialogVisible" @myevents="deveilydata"></dialog-model>
  </div>
</template>

<script>
import DialogModel from "./DialogModel.vue"
  export default {
     
     
    components:{
     
     
      DialogModel
    },
    data(){
     
     
      return{
     
     
        cDialogVisible:false
      }
    },
    methods:{
     
     
      showDialog(){
     
     
        this.cDialogVisible=true;
        console.log("this.dialogVisible",this.cDialogVisible)
      },
      deveilydata(val){
     
     
        console.log("val",val);
        this.cDialogVisible=val
      }
       
    }
  }
</script>

<style lang="css" scoped>

</style>

子组件：子组件中要用this.$emit()去触发父组件中的自定义事件，第二个参数为要传过去的值

<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDia">取 消</el-button>
        <el-button type="primary" @click="confirmDia">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
     
     
    props:{
     
     
      dialogVisible:{
     
     
        type:Boolean,
        default:false
      }
    },
    methods:{
     
     
      cancelDia(){
     
     
         this.$emit("myevents",false)
      },
      confirmDia(){
     
     
        this.$emit("myevents",false)
      }
    }
  }
</script>

<style lang="css" scoped>

</style>