全局组件
<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标签（将整个标签替换）。
组件系统之具名插槽
0