7demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 7demo</title>
    <script src="./js/vue.js"></script>
</head>

<body>

    <div id="app">


        <my-header></my-header>
        <my-list></my-list>
    

    </div>
    <script>

        var busVm = new Vue({});

        var vm3 = new Vue({
            el: "#app",
            // data: {
        
            //     message:"hello myHeader!!!"
            // },
            components: {
                "my-header": {
                    template: `<h2>{{ message }}</h2>`,
        
                    data: function () {

                        return {
                            message:  "hello myHeader!!!"
                        }

                    },
                    mounted() {
                        busVm.$on("changeEvents", function(str){
                            this.message = str;
                        }.bind(this));
                    },
                },
                "my-list": {
                    template: `<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>`,
                    data: function () {

                        return {
                            list:  ["第一项1", "第二项2", "第三项3"]
                        }

                    },
                    methods: {
                        getContent: function(ev) {
                            busVm.$emit("changeEvents", ev.target.innerHTML)
                        }
                    },
                },
            },
            methods: {
                show: function() {
                    console.log("show")
                }
            },
        })
       /*
        1. 空实例与自定义事件
        $emit
        $on

        2.Vuex 状态管理
        state
        mutations
        commit
       
       */
    </script>

</body>

</html>