请选择 进入手机版 | 继续访问电脑版
搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

vue父子组件的通信

[复制链接]
查看: 82|回复: 0

1万

主题

2万

帖子

4万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
46410
发表于 2019-11-9 09:42 | 显示全部楼层 |阅读模式
vue父子组件的通信  游戏 1734466-20191030163408135-872225307


一、父组件向子组件传递数据

1、首先构成父子组件关系
  1.         Document            
  2.                         [size=5]{{cmovies}}[/size]
  3.             {{cmessage}}
  4.         
  5.         
复制代码
2、在子组件中界说一个props,界说两个变量 (messages) (moviess)
  1. props: ['messages', 'moviess']
复制代码
3、操纵子组件时,用V-bind绑定两个变量(messages) (moviess),而且把父组件中的数据(message)(movies)传给这两个变量。
  1. [/code][size=5]****完整代码*****[/size]
  2. [code]        Document                           
  3.                                 [size=5]{{messages}}[/size]
  4.             
  5. [list]               
  6. [*]                    {{item}}            
  7. [/list]        
  8.         
复制代码
** props中补充写法
  1. props: {                // 1、典范限制                // messages:Array,                // moviess:String,                // 供给一些默许值                messages: {                    type: String,                    default: 'aaaa',                    required: true                },                // 当操纵组件的时候,没有绑定props中界说的变量,就会表现界说的默许值                moviess: {                    // 典范是工具或数组,默许值必须是一个函数。                      type: Array,                    // default: []                    default() {                        return []                    }                }            }
复制代码
二、子组件向父组件传数据

1、组成父子组件关系

2、在子组件中自界说一个事变      感化:发射一个事变给父组件
  1. {{item.name}}
复制代码
  1.             methods: {                btnclick: function (item) {                    // 发射事变:自界说事变                    this.$emit('itemclick', item)                }            }
复制代码
3、在父组件的模板中操纵子组件中界说的事变 @itemclick="cpnclick"   而且在父组件建立一个新的事变 cpnclick
  1. [/code][code]            methods: {                cpnclick: function (item) {                    console.log('cpnclick', item)                }            }
复制代码
***完整代码***
  1.                 Document        
  2.                             {{item.name}}        
  3.         
复制代码
vue父子组件的通信  游戏 loading



免责声明:假如加害了您的权益,请联系站长,我们会实时删除侵权内容,感谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Copyright © 2006-2014 妈妈网-中国妈妈第一,是怀孕、育儿、健康等知识交流传播首选平台 版权所有 法律顾问:高律师 客服电话:0791-88289918
技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表