父传子 我们学了，现在我们学 子传父
还记得那个图吗 其实就是 用 $emit 传递。换句话说就是传递自定义事件：
直接上代码 Vue其实很繁琐，框架这种东西就得照猫画虎，说道理是没用的：
这里我们还是一样用VUE实例来当父组件 因为代码很多 为了简便吧 其实都一样的：
下面这个代码是一个很简单的一个显示数据的代码：【我们根据这个代码来添加 子组件数据 传给 父组件】
<!--新建模板--> <template id="cpm"> <div> <button v-for="item in json">{{item.name}}</button> </div> </template> <div id="app"> <child></child> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el:"#app", components:{ child:{ template:‘#cpm‘, data(){ return { json:[ {id:101,name:"金典电影"}, {id:102,name:"青春电影"}, {id:103,name:"文艺电影"}, {id:104,name:"励志电影"}, {id:105,name:"爱情电影"}, ] } } } } }) </script>
案例： 点击某某电影 然后父组件接受到 显示出：【主义看改变的地方即可】
<!--新建模板--> <template id="cpm"> <div> <button v-for="item in json" @click="method(item.id,item.name)" >{{item.name}}</button> </div> </template> <div id="app"> <child @event="appevent"></child> <!--用appevent不用加参数 参数会自动传入(按顺序传) 切记即可！--> <p>{{show()}}</p> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el:"#app", components:{ child:{ template:‘#cpm‘, data(){ return { json:[ {id:101,name:"金典电影"}, {id:102,name:"青春电影"}, {id:103,name:"文艺电影"}, {id:104,name:"励志电影"}, {id:105,name:"爱情电影"}, ] } }, methods:{ method(id,name){ this.$emit(‘event‘,id,name); } } } }, data:{ id:"", name:"" }, methods:{ appevent(id,name){ this.id = id; this.name = name; }, show(){ return "您点击了: Id 为" + this.id + "Name为：" + this.name; } } }) </script>
其实我也不知道怎么讲 反正 他数据传来传去的 贼烦 我学的时候我也奔溃....
this.$emit(‘event‘,id,name);
主要还是这一句 event是一个事件，后面接着的是参数，
调用的时候 ：
<child @event="appevent"></child> <!--用appevent不用加参数 参数会自动传入(按顺序传) 切记即可！-->
appevent 是 父组件的 method ，参数会制动注入到appevent的 千万别去这样： appevent(id,name) 不然报错，
这就是细节。
难也不难 就是繁琐 ，放心吧以后脚手架不会这么淦的