划重点:

  $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。
 
子组件:
 
 1 <template>
2 <div>
3     <!-- <div>子页面</div> -->
4     <div class="mess">
5         <div  v-for="(item,index) in message" :key="index">
6             {{item.id}}  
7         </div>
8     </div>
9     <div>
10         <button @click="addFont()"> 点击+ </button>
11         <button @click="minus()"> 点击- </button>
12     </div>
13 </div>
14 </template>
15 <script>
16 export default {
17     name:"shopping",
18     props: {
19         message:{
20             type : Array,
21             default: function() {
22                return []
23              }
24         },
25     },
26     data() {
27         return {
28             fontSize:0,
29         }
30     },
31     methods: {
32         addFont(){
33             if(this.fontSize <= 0){
34                 this.fontSize =1 ; 
35             }else{
36                 this.fontSize++;
37             }
38             this.$emit('addnum',this.fontSize);
39         },
40         minus(){
41             if(this.fontSize <= 0){
42                 this.fontSize = 0
43             }else{
44                 this.fontSize--
45             }
46             this.$emit('minusNum', this.fontSize);
47         }
48     },
49 }
50 </script>
$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件
 
父组件:
 
 1 <template>
2     <div class="comment">
3         <div>comment</div>
4         <div class="btn">
5             <router-link :to='{name:"shopping", query: { id: userID}}' @click="tiao()" tag="span" >跳转</router-link>
6         </div>
7         <div class="num">{{num}}</div>
8         <shopping :message="HelloWorld" @addnum='addNum' @minusNum="minusNum"></shopping>
9     </div>
10 </template>
11 <script>
12 import shopping from '../shopping/shopping'
13 export default {
14     name:"comment",
15     components:{shopping},
16     data() {
17         return {
18             userID:1,   
19             num:0,
20             HelloWorld:[
21                 { id:"a"},
22                 {id:"b"},
23                 {id:"c"},
24             ]
25         }
26     },
27     methods: {
28         addNum(data){
29             this.num = data
30         },
31         minusNum(data){
32             this.num = data
33         }
34     },
35 }
36 </script>
父组件通过@event监听并接收参数。
 
 
 
 
 
 
 
 

vue传值 ---- >> 子传父,$emit()的更多相关文章

  1. vue的子传父

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

  2. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  3. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  4. Blazor和Vue对比学习(基础1.4):事件和子传父

    Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...

  5. vue传参子传父

    vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...

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

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

  7. vue $emit 子传父

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

  8. Vue组件通信之子传父

    子组件向父组件通信主要通过自定义事件实现. 这里我记录一个小例子来帮助自己记忆. 通过点击子组件的按钮去执行父组件的函数并使用子组件传来的数据. 子组件定义如下: <template id=&q ...

  9. vue传值 ---- >> 父传子,props()

    父组件:     1 <template> 2     <div class="comment"> 3         <div>comment ...

随机推荐

  1. 解放生产力,自动化生成vue组件文档

    一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么 ...

  2. No serializer found for class com.bean.user and no properties discovered to create BeanSerializer

    解决方法: 方法1:将bean目录下的实体类属性由private改为public(不推荐): 方法2:给实体类属性设置setter和getter方法(推荐使用).

  3. Android开发万能Utils(工具大全)

    AndroidUtils Android开发不得不收藏的Utils About AndroidUtilCode  是一个强大易用的安卓工具类库,它合理地封装了安卓开发中常用的函数,具有完善的 Demo ...

  4. 3、mysql的多实例配置(3)

    8.mysql多实例故障排错:

  5. idea debug无法启动 Error running 'Tomcat8': Unable to open debugger port (127.0.0.1:50168): java.net.SocketException "socket closed

    在日志里显示在 event log 里的 Error running 'server_web': Address localhost:1099 is already in use 显示1099单口已被 ...

  6. 利用C语言识别用户输入字符并且输出该字符ASCII码值(大小写字母篇)(含思路)

    要求:从键盘输入一个字符,如果输入字符的是小写英文字母,则将其转换为大写英文字母,然后将转换后的英文字母及其ASCII码值输出到屏幕上,如果输入的是其他字符,则不转换并且直接将它及其ASCII码值输出 ...

  7. php 错误处理及实现

    1.php的错误,警告,异常处理如何实现,那些函数用于处理对应的错误 php 异常提示分为三类 error/warning/notice   错误补充:   Fatal Error:致命错误(脚本终止 ...

  8. XCTF(MISC) give_you_flag

    题目描述:菜狗找到了文件中的彩蛋很开心,给菜猫发了个表情包 1.下载附件,点击查看 发现在数完钱后,有出现一个二维码的东西. 2.使用stegsolv工具,进行逐帧查看. 说个题外话,stegsolv ...

  9. Docker部署Mysq集群

    1.PXC(Percona XtraDB Cluster) 速度慢 但能保证强一致性 适用于保存价值较高的数据 数据同步是双向的 在任一节点写入数据 都会同步到其他所有节点 在任何节点上都能同时读写 ...

  10. NetCore微服务简单流程审批数据库设计及后台服务开发

    1.数据库设计 -- ---------------------------- -- Table structure for TBase_Flow -- ----------------------- ...