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=& ...
随机推荐
- Docker——桥接网络配置
[root@localhost ~]# cd /etc/sysconfig/network-scripts/ [root@localhost network-scripts]# ls ifcfg-et ...
- 05docker仓库---搭建本地仓库
Docker仓库 仓库(Repository)是集中存放镜像的地方,分别公有仓库和私有仓库. 注册服务器是存放仓库的具体服务器.一个注册服务器上可以有多个仓库,每一个仓库里面可以有多个镜像. eg:仓 ...
- jq之display:none与visible:hidden
http://www.cnblogs.com/linxiong945/p/4075146.html 今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给 ...
- 深入探讨java的类加载器
类加载器是 Java 语言的一个创新,也是 Java 语言流行的重要原因之一.它使得 Java 类可以被动态加载到 Java 虚拟机中并执行.类加载器从 JDK 1.0 就出现了,最初是为了满足 Ja ...
- nginx之配置
1)反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端, ...
- HTML实现三角形和旗帜代码
1.三角形 1.1html+css <style> *{ margin: 0px; padding: 0px; } span{ display: block; margin-left: 2 ...
- 判断一个数是否为回文数（js）
//判断是否为回文数:若n=1234321,则称n为一回文数 let readline = require("readline-sync"); let newNum = 0; co ...
- spring ioc aop 理解
OC,依赖倒置的意思,所谓依赖,从程序的角度看,就是比如A要调用B的方法,那么A就依赖于B,反正A要用到B,则A依赖于B.所谓倒置,你必须理解如果不倒置,会怎么着,因为A必须要有B,才可以调用B,如果 ...
- 用jquery写出图片自动轮播效果
相关代码如下,只要把代码粘贴进编辑器,修改图片路径,即可看到效果. 1.html部分 <body> <ul class="banner"> < ...
- python中F/f表达式优于format()表达式
F/f表达式可以解析任意类型的数据 具体实现,看下面示例: 1.解析变量 1 a = 10 3 b = 20 5 res1 = F"a+b的值:{a+b}" 7 print(res ...