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-配置网桥-自定义网络
容器网络访问原理 桥接宿主机网络 临时生效: # 网桥名称 br_name=br0 # 添加网桥 brctl addbr $br_name # 给网桥设置IP ip addr add 192.168 ...
- postpreSQL和oracle数据库的递归
oracle: --包含自身 select * from sec_org start with org_id ='9767FA56D52680AEE043C0A8670580AE' --开始节点 co ...
- WAV格式文件无损合并&帧头数据体解析（python）（原创）
一,百度百科 WAV为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windows平台的音频 ...
- LeetCode 腾讯精选50题--最小栈
题目很简单,实现一个最小栈,能够以线形的时间获取栈中元素的最小值 自己的思路如下: 利用数组,以及两个变量, last用于记录栈顶元素的位置,min用于记录栈中元素的最小值: 每一次push,都比较m ...
- 【JavaScript】js中的构造函数，和构造函数的实例中的原型详解
1. 构造函数作为一个对象,他也有他的原型属性,即.prototype:该属性指向的原型对象是Object. 2. 而构造函数产生的实例却没有.prototype属性,但是作为一个对象,该实例却仍然拥 ...
- mysql float 精度丢失
mysql 中保存了字段 float s=0.3 直接执行sql 查出来是 0.3 但是JPA 执行查询结果是 0.2999 换成decimal 就可以
- 关键词提取算法TF-IDF与TextRank
一.前言 随着互联网的发展,数据的海量增长使得文本信息的分析与处理需求日益突显,而文本处理工作中关键词提取是基础工作之一. TF-IDF与TextRank是经典的关键词提取算法,需要掌握. 二.TF- ...
- Tomcat----服务运行的容器
在介绍Tomcat之前,我们先介绍一个概念Servlet. Servlet是一个运行在WEB服务器上的小的Java程序,用来接收和响应从客户端发送过来的请求,通常使用HTTP协议.从下图可以看出Ser ...
- Oracle笔记（八） 复杂查询及总结
一.复杂查询 1. 列出至少有一个员工的所有部门编号.名称,并统计出这些部门的平均工资.最低工资.最高工资. 1.确定所需要的数据表: emp表:可以查询出员工的数量: dept表:部门名称: emp ...
- （备忘）openssl的证书格式转换
PKCS 全称是Public-KeyCryptography Standards ,是由 RSA 实验室与其它安全系统开发商为促进公钥密码的发展而制订的一系列标准,PKCS 目前共发布过15 个标准. ...