Vue之子组件

全局组件

<script src="./static/vue.min.js"></script>  // 导入vue

<body>
<div id="app"></div>
<script>
    Vue.component('global-component', {
        template: `
            <div>
                <h3>{{ wanrong }}</h3>
                <h2>{{ wanrong }}</h2>
            </div>
        `,
        data() {
            return {
                wanrong: 'Hello Wanrong',
            }
        },
    });

    new Vue({
        el: '#app',
        template: `<global-component></global-component>`,
    })

</script>
</body>

　　全局组件不用再根实例中注册，可以直接在div标签中使用。

<body>
<div id="app">
    <global-component></global-component>
</div>
<script>
    Vue.component('global-component', {
        template: `
            <div>
                <h3>{{ wanrong }}</h3>
                <h2>{{ wanrong }}</h2>
            </div>
        `,
        data() {
            return {
                wanrong: 'Hello Wanrong',
            }
        },
    });

    new Vue({
        el: '#app',
    })

</script>
</body

　　全局组件的复用：

下图为子组件与父组件之间通信的结构关系图，整体写法结构如下：

组件系统之数据通信

组件系统之混用

　　方法调用及参数传递

组件系统之插槽

　　简单点理解就是将模板中的标签替换到注册的标签的位置。注册的标签中的内容替换slot标签（将整个标签替换）。

组件系统之具名插槽