首页 > Web开发 > 详细

VueJS组件之全局组件与局部组件

时间:2017-06-29 11:00:05      阅读:346      评论:0      收藏:0      [点我收藏+]

全局组件

所有实例都能用全局组件。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <runoob></runoob>
</div>

<script>
// 注册
Vue.component(runoob, {
  template: <h1>自定义组件!</h1>
})
// 创建根实例
new Vue({
  el: #app
})
</script>
</body>
</html>

效果展示自定义组件的HTML内容。

局部组件

我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <runoob></runoob>
</div>

<script>
var Child = {
  template: <h1>自定义组件!</h1>
}

// 创建根实例
new Vue({
  el: #app,
  components: {
    // <runoob> 将只在父模板可用
    runoob: Child
  }
})
</script>
</body>
</html>

效果同上也是输出HTML内容。

 

VueJS组件之全局组件与局部组件

原文:http://www.cnblogs.com/boonya/p/7093056.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!