全局组件
<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