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>