使用 Prop 传递数据

组件实例的作用域是孤立的。这就表明不能在子组件的模板内直接引用父组件的原始数据。父组件的数据需要通过 prop下发到子组件中才能使用。
Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会传递。这是为了防止子组件无意间修改了父组件的状态。

特殊情况

比如弹窗，点击子组件外部的按钮可以控制子组件显示与隐藏，点击子组件内部也可以控制子组件隐藏，此时需要属性共享

解决

父组件

<div id="app">
      <table>
        <tr>
            <th colspan="3" @click="show">父组件数据</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{name}}</td>
            <td><input type="text" v-model="name"/></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{ age }}</td>
            <td><input type="text" v-model="age" /></td>
        </tr>
      </table>
    </div>

子组件

<my-child v-bind:my-name="name" v-bind:my-age="age" v-bind:is-show="showc" @on-show-change='changeShow'></my-child>

<template id="isChild">
      <table v-show="show">
        <tr>
            <th colspan="3" @click="change">子组件数据</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{myName}}</td>
            <td><input type="text" v-model="myName"/></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{ myAge }}</td>
            <td><input type="text" v-model="myAge" /></td>
        </tr>
      </table>
    </template>

实例化

var vue = new Vue({
    el:'#app',
    data:{
      showc:false,//父组件属性，传入子组件控制显示隐藏
      name:'han',
      age:'20'
    },
    methods:{
      show () {
        this.showc = !this.showc;//外部控制
      },
      changeShow (val) {//外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
        console.log('外层', val)
        this.showc = val;//更改外部属性
      }
    },
    components:{
      "my-child":{
        template:'#isChild',
        props:['myName','myAge','isShow'],
        data:function(){
          return {
            show:this.isShow//获取外部传入值
          }
        },
        methods:{
          change () {
            this.show = false;//点击隐藏
          }
        },
        watch:{
          isShow(val) {//监控外部传入属性变更后修改内部属性
            this.show = val
          },
          show(val) {//子组件内属性变更后向外部发送事件通知
            console.log(val,'内部')
            this.$emit("on-show-change",val);
          }
        }
      }
    }
  })

参考如何在Vue2中实现组件props双向绑定