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

2021-07-09 12:04

阅读：438

标签：utf-8 charset 模板教程 css pre 菜鸟 str 组件

全局组件

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

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: ‘自定义组件!‘
})
// 创建根实例
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: ‘自定义组件!‘
}

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

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

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

标签：utf-8 charset 模板教程 css pre 菜鸟 str 组件

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

上一篇：js事件总汇

下一篇：反向Ajax：WebSocket

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：VueJS组件之全局组件与局部组件
文章链接：http://soscw.com/index.php/essay/102763.html

亲，登录后才可以留言！

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

自定义组件!

自定义组件!

评论

热门文章

推荐文章

最新文章

置顶文章