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=& ...
随机推荐
- jenkins转换显示语言为中文简体（jenkins汉化）
jenkins版本2.117 单位使用的jenkins一直是英文版本,有同事建议切换为中文版. 以下过程完成转换. 一.安装插件 主界面-->系统管理-->插件管理-->可选插件 图 ...
- 【ExtJs】ext前台中的日期控件传输时间到后台的转换保存过程
//前台日期选择框 {fieldLabel:, padding: ',afterLabelTextTpl: required,allowBlank: false,format: 'Y-m-d H:i: ...
- ES6入门五：箭头函数、函数与ES6新语法
箭头函数的基本用法与特点 函数与ES6新语法 一.箭头函数的基本用法与特点 声明箭头函数采用声明变量和常量的关键字:var.let.const 箭头函数的参数:没有参数用"()"空 ...
- 正着打星星（js）
//让用户输入行数,使用for循环嵌套打出正着的星星来,行数等于用户输入的数字 //例如:用户输入6 // * // *** // ***** // ******* // ********* // * ...
- <%%> <%! %> <%=%> <%-- --%> jsp中jstl一些运用
<%%> 这里面可以添加java代码片段<%! %> 这里添加java方法 主要是用来声明变量的 <%=%> 将变量或表达式值输出到页面<%-- --%> ...
- SQL Tuning 基础概述10
在<SQL Tuning 基础概述05 - Oracle 索引类型及介绍>的1.5小节,提到了几种"索引的常见执行计划": INDEX FULL SCAN:索引的全扫描 ...
- deep_learning_Dropout
吴恩达深度学习笔记(十一)—— dropout正则化 主要内容: 一.dropout正则化的思想 二.dropout算法流程 三.dropout的优缺点 一.dropout正则化的思想 在神经网络中, ...
- IPC之util.h源码解读
/* SPDX-License-Identifier: GPL-2.0 */ /* * linux/ipc/util.h * Copyright (C) 1999 Christoph Rohland ...
- three.js之让物体动起来方式（一）移动摄像机
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 批量关闭linux进程
批量关闭linux进程 你是否经常遇到需要批量杀死很多进程的情况?而你是否还在一个一个的kill. 接下来我教你一个小秘诀吧. 1.首先我们查看当前的进程列表. 我们以查看nginx进程为例,通过ps ...