VueJS组件之全局组件与局部组件
全局组件
所有实例都能用全局组件。
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组件之全局组件与局部组件的更多相关文章
- vue组件调用(全局调用和局部调用)
当用vue-cli创建一个项目后, 创建项目的方法: https://www.cnblogs.com/fps2tao/p/9376847.html 编写了组件怎么,在其他组件中调用了? 组件listB ...
- Vue学习-组件的基本使用（局部组件）
目录 示例代码 1.创建组件(构造器对象创建-Vue.extend) 2.注册组件 3.使用组件 4.语法糖创建并注册组件 示例代码 http://jsrun.net/H8vKp/edit 1.创建组 ...
- Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- vue 组件 全局注册和局部注册
全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
随机推荐
- 标准IO与文件IO 的区别
先来了解下什么是标准IO以及文件IO. 标准IO:标准I/O是ANSI C建立的一个标准I/O模型,是一个标准函数包和stdio.h头文件中的定义,具有一定的可移植性.标准IO库处理很多细节.例如缓存 ...
- HDU 4328 Cut the cake
Cut the cake Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- 【CF1073C】Vasya and Robot（二分，构造）
题意:给定长为n的机器人行走路线,每个字符代表上下左右走,可以更改将一些字符改成另外三个字符,定义花费为更改的下标max-min+1, 问从(0,0)走到(X,Y)的最小花费,无解输出-1 n< ...
- Javascript&Html-location对象
Javascript&Html-location对象 location对应是BOM最有用的对象之一,她提供了当前窗口中加载的文档的信息,并提供了一些导航的功能.location对象有一个特别的 ...
- ThreadPool学习草稿1
原文发布时间为:2010-10-27 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Collections.Generic;using Syste ...
- echarts中关于merge的代码
function merge(target, source, overwrite) { // We should escapse that source is string // and enter ...
- 关于Struts2中param的作用
1.页面传参与配置传参的区别: 如果页面Form表单的参数在Action类中有相应的setter方法,则会优先取页面Form表单传过来的值,如果页面没有该属性同名的参数,则会从配置文件中取同名的参数值 ...
- AtCoder Regular Contest 090 C D E F
C - Candies 题意 求左上角走到右下角最大的数字和. 思路 直接\(dp\) Code #include <bits/stdc++.h> #define maxn 110 usi ...
- TreeMap和TreeSet的区别与联系
TreeMap 和 TreeSet 是 Java Collection Framework 的两个重要成员,其中 TreeMap 是 Map 接口的常用实现类,而 TreeSet 是 Set 接口的常 ...
- C# 数组与 list 互相转换案例
在项目中用到了 随手分享下 记得点赞呦! 1,从System.String[]转到List<System.String>System.String[] str={"str&quo ...