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=& ...
随机推荐
- MySQL中导入Excel表格中的数据
在数据库中建立好响应的数据库.表(参考excel表格中列中的名字和内容): 将excel表格另存为txt文件,选择“文本文件(制表符分割)”: 打开相应的txt文件,只留下要导入的数据(windows ...
- ASP.NET Core MVC里面Razor如何获取URL参数
原文:ASP.NET Core MVC里面Razor如何获取URL参数 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https:// ...
- ModbusTCP报文详解【一】
[1]功能码01H [2]功能码02H [3]功能码03H [4]功能码04H
- Qt常用快捷键
F1 查看帮助F2 跳转到函数定义(和Ctrl+鼠标左键一样的效果)Shift+F2 声明和定义之间切换F4 头文件和源文件之间切换Ctrl+1 ...
- 关于servlet类，继承HttpServlet，但是无法导入HttpServlet包的原因和解决方法
原因:缺少tomcat的libraries(HttpServlet对应位置在tomcat的lib中====) 解决: 1. 2. 3. 4.
- djang部署vue项目
1,将vue项目npm run build 在此之前需要修改打包后的js,css文件路径: 需新建vue.config.js 在文件中添加: module.exports = { // 输出目录 as ...
- 一点css 基础
css 行内样式优先度最高 margin 属性 为声明外边距 如图 顺序依次为上右下左
- mac 下拉取svn代码
svn checkout https://113.108.97.187/svn/zkteco/zks-app --username=lucy --password=lucy66 svn checkou ...
- kubernetes资源清单之DaemonSet
什么是 DaemonSet? DaemonSet 确保全部(或者某些)节点上运行一个 Pod 的副本.当有节点加入集群时,也会为他们新增一个 Pod . 当有节点从集群移除时,这些 Pod 也会被回收 ...
- Django简介及安装
Django简介及安装 我们都知道,Django是一种基于Python的Web开发框架. 那么,什么是Web开发?Web开发指的是开发基于B/S架构,通过前后端的配合,将后台服务器的数据在浏览器上展现 ...