vue.js
router--路由
<div id="app">
<my-app :my-msg="msg" :my-data="data1"></my-app>
<my-app :my-msg="msg2" :my-data="data2"></my-app>
</div>
<script>
Vue.component( "myApp",{
props:["myMsg","myData"],
data:function () {
return {
content:""
}
},
template:`
<div>
<h1>{{myMsg}}</h1>
<input type="text" v-model="content">
<my-list :my-data="myData" @myEvent="changeValue"></my-list>
</div>
`,
methods:{
changeValue(msg){
this.content=msg
}
}
});
Vue.component( "myList",{
props:["myData"],
template:`
<div>
<ul>
<li v-for="num in myData" @click="myClick(num)">{{num}}</li>
</ul>
</div>
`,
methods:{
myClick(num){
this.$emit("myEvent",num);
}
}
});
var vm = new Vue({
el:"#app",
data:{
msg:"Hello",
msg2:"Vue",
data1:[11,22,33,44],
data2:[55,66,77,88]
}
});
</script>
