vue中全局组件与局部组件的注册，以及动态绑定props值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#app{
width:100%;
height:100px;
background:red;
}
.box{
width:100%;
height:30px;
background:yellow;
}
</style>
</head>
<body>
<div id="app" @click="onmessage()">
{{ message }}
<one-component todo="haha"></one-component>
<two-component a="enen"></two-component>
<div class="box" v-for="(item,index) in lala" :key="index">
<laaaaaa :bbb="item"></laaaaaa>
</div> </div>
<script>
var objarr=[
{id:0,text:"二"},
{id:1,text:"三"},
{id:2,text:"四"},
{id:3,text:"五"},
{id:4,text:"六"},
{id:5,text:"七"}
]
Vue.component('one-component',{//全局注册
template:`<div>我是组件{{ todo }}</div>`,
props:['todo']
});
Vue.component('two-component',{//全局注册
data(){
return{
bb:"值"
}
},
template:`<div>我是第二个全局组件{{ a }}{{ bb }}</div>`,
props:["a"]
});
var componentA = { //局部注册组件
template:`<div>我是局部组件{{ hehe }}{{ bbb.id }}{{ bbb.text }}</div>`,
data(){
return{
hehe:"我是子组件的值"
}
},
props:["bbb"]
}
var app=new Vue({
el:"#app",
components:{
"laaaaaa":componentA
},
data:{
message:'页面加载于' + new Date().toLocaleString(),
lala:objarr
},
methods: {
onmessage(){
this.message='haha'
}
},
mounted() {
console.log(this.lala);
}
}); </script>
</body>
</html>
vue中全局组件与局部组件的注册，以及动态绑定props值的更多相关文章
- vue中全局filter和局部filter怎么用?
需求: 将价值上加上元单位符号(全局filter) <template> <div> 衣服价格:{{productPrice|formatTime}} </div> ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- VUE3 之 全局组件与局部组件
1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> < ...
- 在vue中使用Element的message组件
在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
随机推荐
- Codeforces 1240A. Save the Nature
传送门 显然可以二分答案 如果知道卖的票数,那么就能算出有多少 $a$ 倍数但不是 $b$ 倍数的位置,多少 $b$ 倍数但不是 $a$ 倍数的位置,多少既是 $a$ 又是 $b$ 倍数的位置 然后贪 ...
- signalfx的中间件监控指标so cool
signalfx的中间件监控指标so cool www.jianshu.com 对于我们做运维的来说,监控是最基本的东西,不过在初创公司很多计划是跟不上项目架构变化的,项目中会不断加入各种服务和组 ...
- GTA4 EFLC cheat code
GTA4 EFLC cheat code 提示警告:您的图像设置接近或超出您的系统推荐资源限制,为了使游戏运行更加流畅推荐你降低你的图像设置. 在游戏目录新建名为 commandline的txt文本文 ...
- 学习笔记--三分法&秦九韶算法
前言 其实也没什么好说的吧,三分法就是用来求一个单调函数的最值和满足最大值的\(x\),秦九韶算法就是在\(O(N)\)时间内求一个多项式值 怎么用 三分法使用--看这篇:https://www.cn ...
- 在javascript中：（函数（）（）是一个匿名函数
在javascript中:(函数()()是一个匿名函数,它主要使用函数中的变量范围来避免全局变量,影响整个页面环境,并提高代码兼容性. (函数())是标准函数定义,但不会复制到任何变量.所以有一个没有 ...
- 【Swift后台】背景介绍
在2017年11月的时候,就已经对Swift后台进行过研究,简书上发表过相应文章,那时候发表的是单纯的对Vapor文档的翻译,此次则是作为进一步研究的学习笔记来保存. Swift后台的本质,主要是Va ...
- java压缩下载图片并以zip流的形式下载到客户端
/** * * @param page * @param rows * @param works * @return * @author ffwwzz 下载zip * @throws IOExcept ...
- 第九章· MySQL的备份和恢复
一.备份的原因 运维工作的核心简单概括就两件事: 1)第一个是保护公司的数据. 2)第二个是让网站能7*24小时提供服务(用户体验).  备份的原因 1)备份就是为了恢复. 2)尽量减少数据的丢失( ...
- Linux CentOS 7 防火墙与端口设置操作
CentOS升级到7之后用firewall代替了iptables来设置Linux端口, 下面是具体的设置方法: []:选填 <>:必填 [<zone>]:作用域(block.d ...
- Jquery实现类似百度的搜索框
最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...