vue-组件

全局组件

   Vue.component("detail", {
            template: `<h1>详情页面</h1>`
        })

局部组件

 var Child = {
            template: '<h1>自定义组件!</h1>'
        }

父传子&子改父

 <div id="app">
        <!-- 组件名使用大写 要使用-分隔 -->
        <!-- 可以缩写使用 /关闭 -->
        <!-- 多个组件写在一起不能简写 -->
        <!-- :msg="str"父传子 加：传的是变量，不加传的是字符串 -->
        <!-- <list-page :msg="str"></list-page> -->
        <list-page :msg="msg" @magfn="magfn"></list-page>
        <detail></detail>
        <jpage></jpage>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        // 全局组件 注意顺序，先写全局组件 在new实例
        Vue.component("listPage", {
            props: ["msg"],
            template: `<div>
            <h1>列表页面</h1>
            <h2 @click="changemsg">{{msg}}</h2>
            </div>`,
            methods: {
                changemsg() {
                    console.log(this.msg);
                    // 需要使用自定义事件的方法来实现子改父
                    this.$emit("magfn", "诸子百家")
                }
            }
        }

        )
        Vue.component("detail", {
            template: `<h1>详情页面</h1>`
        })
        var Child = {
            template: '<h1>自定义组件!</h1>'
        }
        new Vue({
            el: "#app",
            data: {
                // str: "秦时明月"
                msg: "秦时明月"
            },
            methods: {
                magfn(s) {
                    this.msg = s
                }
            },
            // 局部组件
            components: {
                "jpage": {
                    template: '<div><h1>子组件</h1></div>'
                }


            }
        })
    </script>