vue $emit 子传父
我们使用子组件传递值给父组件使用 $emit
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: ;
margin: ;
}
.main{
width: 200px;
}
.head{
width: 200px;
height: 80px;
background-color: purple; }
.main2{
width: 200px;
height: 300px;
}
.main2 .aside{
float: left;
width: %;
height: %;
background-color: green;
}
.main2 .content{
float: left;
width: %;
height: %;
background-color: red;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript"> Vue.component('Vbtn',{
template:`
<button>按钮</button>
`
}); var Vcontent = {
template:`
<div class='content'>我是内容组件
<ul>
<li v-for = '(item,index) in posts'>
<h3>{{item.title}}</h3>
<h4>{{item.content}}</h4>
</li> </ul>
</div>
`,
props:['posts']
} var Vaside = {
template:`
<div class='aside'>我是侧边栏组件 </div>
`
}; var Vheader = {
template:`
<div class='head'>
我是头部组件
<button @click = 'changeFontSize'>字体变大</button> </div>
`,
methods:{
changeFontSize(){ this.$emit('change')
}
}
}; // 1.声明局部组件 App入口组件
var App = {
template:`
<div class='main' :style = '{fontSize:postFontSize+"em"}'>
<Vheader @change = 'changeHandler'/>
<div class = 'main2'>
<Vaside />
<Vcontent :posts = 'posts'/>
</div>
</div>
`,
methods:{
changeHandler(){
this.postFontSize+=.;
}
},
data(){
return {
posts:[
{id:,title:"我的第一个学习框架",content:'vue'},
{id:,title:"我的第二个学习框架",content:'react'},
{id:,title:"我的第三个学习框架",content:'angular'} ],
postFontSize: }
},
components:{
Vheader,
Vaside,
Vcontent
}
}; new Vue({
el:'#app',
// 3.使用
template:'<App></App>',
data(){
return { }
},
// 2.挂载组件
components:{
App
}
}); </script> </body>
</html>
效果：
分析：
vue $emit 子传父的更多相关文章
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- Vue父子组件传值 | 父传子 | 子传父
父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...
- Vue ---- 组价 组件化 子传父 父传子
目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- vue子传父、父传子
子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...
- Vue-组件传值：子传父和兄弟组件间常见的传值方式
前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...
- vue传参子传父
vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...
- Blazor和Vue对比学习（基础1.4）：事件和子传父
Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...
- vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...
随机推荐
- JSP界面引用百度地图获取坐标
需求: 需要在JSP界面上引用百度地图,文本框中输入地址之后,自动拿到在百度地图上的经纬度 解决步骤: 1.引入百度地图api: head中进行引用<script type="text ...
- ionic ios上状态栏和app重叠解决方案
干货文章 ·2018-03-22 01:33:01 官方issues: https://github.com/ionic-team/ionic/issues/13294 解决办法: 1.在 confi ...
- shell script 学习
终于来到了shell脚本的学习,貌似很牛叉. shell script鸟叔解释:利用shell的功能写的一个program,使用纯文本文件,将一些shell语法和指令写在里面,搭配正则表示法,管线命令 ...
- codeforces847J Students Initiation 网络流
题目传送门 题意: 有n个人,m对关系,要求每对关系中,有且仅有一个人给另外一个人送礼物,并且使送出礼物最多的人送的礼物尽可能少.并输出送礼物的方案. 思路:这道题麻烦的是网络流模型的转换(废话). ...
- 导出EXCEL（带数据）
/* * 导出EXCEL * @param req * @param resp * @param model * @param info * @return */ @RequestMapping(va ...
- CF1016F 【Road Projects】
思路 可以考虑另一种想法:因为我们发现,答案是肯定不会大于在原来的树上的最短路径的.所以原来的最短路是(有可能的)最大值! 我们把树变成这样,提取出1~n的路径,方便观看撕烤: (它有个我起的名字,叫 ...
- Github上发布托管和下载
打包托管 远程下载安装 git clone https://github/2008nmj/mnist_python 使用git工具和命令行 Git使用场景 (可以不用上传到托管平台) 写论文 分工合作 ...
- Hbase表类型的设计
HBase表类型的设计 1.短宽 这种设计一般适用于: * 有大量的列 * 有很少的行 2.高瘦 这种设计一般适用于: * 有很少的列 * 有大量的行 3.短宽-高瘦的对比 短宽 * 使用列名进行查询 ...
- 2015ICPC chanchun HDU 5534 (树形题转换完全背包)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5534 题意:给你n个点,让你加上n-1条边使他变成一棵树,题目首先给你a[1] a[2].....a[n- ...
- [NOIP模拟测试3] 建造游乐园 题解（欧拉图性质）
Orz 出题人石二队爷 我们可以先求出有n个点的联通欧拉图数量,然后使它删或增一条边得到我们要求的方案 也就是让它乘上$C_n^2$ (n个点里选2个点,要么删边要么连边,选择唯一) 那么接下来就是求 ...