<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="traceur.js"></script> <script src="BrowserSystem.js"></script> <script src="bootstrap.js"></script> <script src="vue.js"></script> </head> <script type="text/traceur"> window.onload=function(){ Vue.config.devtools = true; var parent = { data(){ return { a:10, } }, template: '<div @click="pc" >---parent{{a}} -- , <child v-on:increment="incrementTotal" :m.sync="a"></child></div>', methods:{ pc:function(){ this.a += 0; }, incrementTotal:function(){ //alert(12344444); //this.a = -100; }, }, components:{ "child":{ data(){ // data:function(){ 简写 return { b:'def', c:0, } }, props:['m'], mounted(){ this.c = this.m; }, template:'<div @click="cc">child child,<strong>{{typeof m}},{{m}},{{c}},</strong><i>,{{b}},</i></div>', methods:{ cc:function(){ //this.b += 2; this.c += 200; this.m += 100; //不建议直接操作m， //alert(789); //this.$emit('increment'); //alert(456); } }, } } } var app3 = new Vue({ el: '#app-3', data:{ }, methods:{ }, components:{ 'parent':parent, }, computed:{ } }) }; </script> <style> </style> <body> <div id="app-3" > <parent></parent>========== </div> </body> </html>