<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <input type="text" v-model="msg"> <!-- :cmovies="movies"：父传子之传值 --> <!-- @item-click="itemClick"：接收子组件通过自定义事件传过来的值（子传父亲） --> <!-- ref="c" 组件标识，利于得到该子组件实例对象 --> <cpn ref="c" :cmovies="movies" @item-click="itemClick"></cpn> </div> <!-- 子组件模板 --> <template id="cpn"> <div> <h1>从父组件传过来的值:</h1> <ul> <li v-for="item in xmovie" @click="clickmovie(item)">{{item}}--点我传值至父组件>></li> </ul> </div> </template> <script> // 子组件 const cpn = { // 引用模板 template : "#cpn", // props 父传子之接收 // props: ["cmovies"], props : { cmovies :{ // 限定类型 type:Array, // 默认值(父组件未传值) default(){ // 这里为什么要用工厂函数？思考下，当限定类型为Object或Array时会报错 return ['不能说的秘密','头文字D']; }, } }, data(){ // 又是工厂函数，为什么和vue实例data的定义有别?多个vue组件，如果不用工厂函数的话，各个vue实例对象的属性会引用混乱 return { // 将父组件传过来的值放到data里面，变成自己的属性（拓展性，不然不允许修改） xmovie : this.cmovies }; }, methods: { clickmovie (item){ console.log("子组件点击",item) // 将点击事件转成自定义事件传给父组件 // emit:发射 console.log("值通过自定义事件发射至父组件") this.$emit('item-click',item); } }, mounted(){ console.log("cpn子组件挂载完毕，根组件root对象：",this.$root) } } // 父组件，在这里父组件是vue实例 const app2 = new Vue({ el: "#app", data: { // 准备传给子组件的值 movies: ['海王','海贼王'], msg:"watch实时监测", }, /*注册组件*/ components:{ cpn, }, methods:{ itemClick(item){ console.log("父组件接收",item); } }, // watch:实时监测属性值的改变 watch:{ msg(newVal,oldVal){ console.log("watch实时监测更新数据，新数据：",newVal) } }, mounted (){ // this.$refs 所以的子组件 // this.$refs.c 子组件中 设置了ref属性值为c的内个组件 console.log("vue实例挂载完毕，有一个子组件，实例对象为：",this.$refs.c) } }) </script> </body> </html>