一.创建全局组件的四种方式
? ? ?1.第一种
? ? ? ? 第一步是创建模板,给这个模板一个名叫“c”。第二步是创建一个标签,第一个参数是“标签名”,我这里也叫他“c”,不一定要和模板名一样;第二个参数是模板名。可以理解为把这个模板赋值给了这个标签。这样创建的这个标签就有了木板的样式。? ? ? ? ? ? ? ? ? ? ?
<script>
let c= Vue.extend({
template: "<h1>现在c标签有h1的样式了</h1>",
});
Vue.component("c", c);
</script>
? ? ?2.第二种。这种方式必须要当读写一个script标签当做模板
<script id="fff" type="x-template">
<h1>现在e标签有h1的样式了</h1>
</script>
<script>
Vue.component("e",{template:"#fff"})
</script>
? ? ?3.第三种。这种看起来是代码最少的。
<script>
Vue.component("d", {template: "<h1>现在d标签有h1的样式了</h1>"});
</script>
? ? ?4.第四种,这种是最常用的模板,相当于把h1标签的样式给了g标签,使用g标签相当于h1标签
<body>
<h1 id="hhhhhhh">
现在g标签有h1的样式了
</h1>
</body>
<script>
let g= new Vue({
template:"#hhhhhhh"
})
</script>
创建好后就可以使用这些创建的标签了。但是要写在vue实例的控制区域(挂载目标)里。
<div id="app">
<c></c>
<d></d>
<e></e>
<g></g>
</div>
?效果:
二.
|