在运用vue搭建项目将页面分成各个组件时，时常会遇到将父组件的请求到的数据传入子组件用于操作显示，然后将操作好的数据从子组件传出，因为vue经验不常用就会将其遗忘，所以特此将所阅读到并有所获的博客修改后记录下来，防止技术遗忘。

现在我们创建一个template子组件，子组件命名为hi-popSelect,并在父组件引入。

// 父组件引用
 <hi-popSelect :isShow="isShowData" @func="getMsg"></hi-popSelect>  
//  在父组件中的子组件标签中创建一个自定义属性isShow,将父组件的data里面的isShowData数据传入给子组件
// @func为子组件中传回来的为key值为func的数值
// getMsg则为父组件的函数，
// getMsg会将传入的func对应的数值传入自己的函数变量参数value，从而触发此函数
 
　import popSelect from '../components/popSelect';
  components: {
   'hi-popSelect': popSelect
  },
 
  data(){
    return {　　　
　　　　isShowData: false //data属性，用于父组件传入子组件参数
   }  
  }
 
　　methods: {
　　　getMsg (data) {
　　　　this.isShowData = data;
　　　},
　　}
　<el-dialog class="hi-dialog" :visible.sync="currentIsShow">
　　</el-dialog>
 
　　
 
//  父子传参（父传子）
　　props: ['isShow'], 
//  isShow为在父组件中的子组件标签中自定义的属性名
　　data(){
　　　return {
　　　　currentIsShow: this.isShow, 
//  在data里重新赋值，不改变父组件传值，
//  this.isShow指代的是props里面的参数isShow
　　　}
　　}
 
　　watch: {
//　因为在vue生命周期中子组件创建后只会赋一次值，之后父组件数值变化了，
//  子组件的数值也会变化，但显示的数据不会发生改变。
//  所以需要监听父组件传参变化重新赋值让子组件重新赋值。
//  此处的isShow并不是函数，而是对应的要赋值的变量名isShow
　　　isShow (val) {
　　　 this.currentIsShow = val;
　　 }
　　},
 
  methods: {　
 // 关闭对话框并把值传给父组件 (子传父)，此函数未调用
 // 函数作用是当触发此函数时子组件会将key值为func的数值传给父组件，
 // this.currentIsShow为变量值
　　　hideData () {
　　　　this.$emit('func', this.currentIsShow);
　　　},
　　}