024 V 组件：全局 & 局部注册
本帖最后由 不二如是 于 2018-9-24 11:19 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们简单了解了什么是组件，本次来学习如何创建。
先来回顾一下，之前如何创建Vue实例：
<div id="myApp"></div>
<script>
var app = new Vue({
el:"#MyApp"
})
</script>
组件的创建和上面很类似，需要注册后才能使用。
注册又分为“全局注册”和“局部注册”两种方式。
全局注册后，任何Vue实例都可以使用，例如：
<script>
Vue.component('my-component',{
// 选项
})
</script>
my-component就是注册的组件自定义标签名称，建议采取小写字母加“-”分割的形式命名。
在实例创建注册后，我们就可以通过<my-component></my-component>的形式来使用组件了。
来一个完整的例子，创建div：
<div id="myApp">
<my-component></my-component>
</div>
创建Vue：
<script>
Vue.component('my-component',{
// 选项
});
var app = new Vue({
el:"#myApp"
})
</script>
现在页面还是空白的，因为自定义的组件没有任何内容。
在选项中添加template，显示一下组件内容：
Vue.component('my-component',{
// 选项
template:'<p>我是组件的内容</p>'
});
template的DOM结构必须被一个元素包含，如果直接写成“我是组件的内容”，没有任何元素将无法被渲染。
在Vue实例中，使用components选项也可以实现局部注册组件。
注册后的组件只有在该实例作用域下有效。
组件中也可以使用components选项来注册组件，使组件嵌套。
创建一个变量：
var fishc = {
template:'<p>我是组件的内容</p>'
}
然后在Vue实例中注册：
var app = new Vue({
el:"#myApp",
components:{
'my-component':fishc
}
})
同样可以实现，而且更容易记忆。
课后作业
1、组件创建时不注册可以使用（T/F）
2、补全代码，显示组件内容：
<div id="?">
<?></?>
</div>
<script>
Vue.component('?',{
// 选项
?:'<p>我是组件的内容</p>'
});
var app = new Vue({
el:"#myApp"
})
</script>
3、在Vue实例中，使用components选项也可以实现局部注册组件。（T/F）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 本帖最后由 lbjstudypython 于 2018-11-27 17:01 编辑
1.F
2.<div id="myapp">
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template:'<p>我是组件的内容</p>'
});
var app = new Vue({
el:"#myApp"
})
</script>
3.T 1.F
2.
<div id="myApp">
<component></component>
</div>
<script>
Vue.component('component',{
// 选项
component:'<p>我是组件的内容</p>'
});
var app = new Vue({
el:"#myApp"
})
</script>
3.T 0 学习 1
页:
[1]