父组件
<template>
<div id="app">
<child @onChange='onChildValue'></child>
<div v-if='index == 0'>这是index为零的值</div>
<div v-else-if='index == 1'>这是index为壹的值</div>
<div v-else='index == 2'>这是index为贰的值</div>
</div>
</template> <script>
// 引入子组件
import child from './components/child.vue'
export default {
//放入到组件钩子函数中
components:{child},
data(){
return{
index:0
}
},
methods:{
// val 从子组件中获取到的值
onChildValue(val){
this.index = val
console.log(val)
}
}
}
</script> <style scoped> </style>
子组件
<template>
<div class="child">
//根据条件判断 显示切换之后的样式
<button v-for="(item,index) in list" :key="item.index" :class="[index == num ? 'add' : '']" @click="addStyle(index)">
{{ item }}
</button>
</div>
</template> <script>
export default {
data(){
return{
list:['推荐','必备','爆款'],
num:0
}
},
methods:{
addStyle(index){
// 进行子向父传值
this.num = index
//使用$emit想父组件进行传值
this.$emit("onChange",this.num)
}
}
}
</script> <style scoped>
button{
margin-left:30px;
}
.add{
color:red;
font-size:26px;
}
</style>

vue 实现子向父传值的更多相关文章

  1. uniapp和vue 父向子传值、传方法及子向父传值。(一看就会超级简约)

    1.父向子传值:父组件在引用子组件时通过自定义属性绑定自身需要传递的值(数据),子组件用props:[  '自定义'  ]接收即可使用(props里数据是只读模式).(简约版:子绑定父的属性并用pro ...

  2. react hooks子给父传值

    子给父传值需要通过事件方法来传值,这里我们子组件是触发了一个点击事件传值: <Button onClick={()=>setshowregister(false)}>注册</B ...

  3. vue.js_09_vue-父子组件的传值方法

    1.父向子传递数据 1>定义一个父组件和一个子组件 2>父组件通过v-bind绑定传递的数据  :parentmsg="msg" 3>子组件需要通过 props: ...

  4. vue子向父传值

    要弄懂子组件如何向父组件传值,需要理清步骤 子组件向父组件传值的步骤 一:子组件在组件标签上通过绑定事件的方式向父组件发射数据 <!--html--><template id=&qu ...

  5. vue的子传父

    子组件传值给父组件,需要触发一个事件. 在这个事件里,使用this.$emit("父组件使用的名称","子组件的数据") 在父组件中引用的子组件,在子组件的标签 ...

  6. vue $emit 子传父

    我们使用子组件传递值给父组件使用 $emit 代码 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. 深度剖析Vue中父给子、子给父、兄弟之间传值!

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

  8. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  9. vue组件之间互相传值:父传子,子传父

    今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...

随机推荐

  1. 【Java编程思想笔记】注解--元注解

    参考文章:(小白的小小白的白 )https://blog.csdn.net/weixin_42315600/article/details/80630669 https://www.cnblogs.c ...

  2. 万维网WWW详解

    万维网WWW(World Wide Web)并非某种特殊的计算机网络,万维网是一个个大规模的.联机式的信息储藏所,英文简称Web. 万维网使用链接的方式能非常方便地从英特网上的一个站点访问到一个站点, ...

  3. EDID:识别和解决常见问题指南

    随着 HDMI.DVI 和 DisplayPort 的迅速采用,专业视音频行业正继续从模拟向数字视频技术转换.虽然在很大程度上取得了成功,但在向最终用户提供稳定.无故障的视频系统时,这种转变仍带来了诸 ...

  4. JavaScript高级程序设计(读书笔记)(一)

    本笔记汇总了作者认为“JavaScript高级程序设计”这本书的前七章知识重点,仅供参考. 第一章 JavaScript简介 JavaScript发展简史: 1995年,JavaScript诞生 19 ...

  5. [C]\x字符转义序列

    概述       \x转义的定义是这样的 转义符 字符值 输出结果 \xh[h...] 具有此十六进制码的字符 输出此字符 问题      看似\x后面可以接受1或n个十六进制的字符,但是如果你把一个 ...

  6. react - web + webpack4 从0构建

    https://www.jianshu.com/p/91a4214b913b  文章https://github.com/Liao123/react-web 可运行的代码 dev分支

  7. java基础学习总结——面向对象1

    目录 一.面向过程的思想和面向对象的思想 二.简单理解面向对象 三.面向对象的设计思想 四.对象和类的概念 五.如何抽象出一个类? 六.类(对象)之间的关系 七.Java与面向对象 八.为什么使用面向 ...

  8. Hive快捷查询:不启用Mapreduce job启用Fetch task三种方式介绍

    如果查询表的某一列,Hive中默认会启用MapReduce job来完成这个任务,如下: hive>select id,name from m limit 10;--执行时hive会启用MapR ...

  9. zoj4027 线性dp!好题

    非常好的dp,可是我太菜做不出来.. /* 第i个左括号不可能越过第i+1个左括号 如果第i个左括号到位置j,前提是第i+1个左括号就必须到位置j+1即以后 用dp[i][j]表示把第i个左括号转移到 ...

  10. cf1153E 二分思维交互

    恶臭的交互题 /* 一个结论:一个矩形将空间分割成两部分,如果开头结尾都在一个部分内,那么穿过矩形边框的线条数就是偶数,反之就是奇数 通过这个结论来进行判断 先询问999次将两个x坐标确定,方法是询问 ...