Vue.component('Chlid',{         template:`         <div>           <p>我是一个子组件{{chlidDate}}</p>         <input type="text" v-model='chlidDate'/>         </div>         `,        props:['chlidDate']       });       Vue.component('Parent',{        data(){          return{            msg:"我是父组件的数据"          }        },        template:`        <div>          <p>我是一个父组件</p>         <Chlid :chlidDate ='msg' />        </div>        `      });

- 子→ 父

 // 1. parent 2.Child       Vue.component('Chind',{         template:`         <div>           <p>我是子组件</p>          <input style='text' v-model='chlidData'  @input='changeValue(chlidData)'/>         </div>            `  ,          props:['chlidData'],          methods:{              changeValue(val){              //$emit(自定义的事件名,消息)              this.$emit('childHandler',val)            }          }       })        Vue.component('Parent',{        data(){          return{            msg:'我是父组件的数据'            }        },        template:`        <div>        <p>我是父组件</p>        <Chind :chlidData = 'msg'  @childHandler ='childHandler'/>        </div>        `,        methods:{          childHandler(val){            console.log(val);          }        }      });

<div id="app"></div>    <script type="text/javascript">      Vue.component('myLi',{        template:`         <li>           预留的第一个坑           <slot name='two'></slot>           预留的第二个坑           <slot name='three'></slot>         </li>        `      });      var App={        template:`        <div>         <ul>          <myLi>          <h2 slot='two'>我是第一个坑</h2>          <h3 slot='three'>我是第二个坑</h3>          </myLi>         </ul>        </div>                `      };            new Vue({        el:'#app',        components:{          App,        },        template:`<App/>`      })