个人理解并整理如下

一、父传子

prop传参

父组件传递参数
<x-scoll :class="red"></x-scoll>

子组件
props:["class"] 子组件接收red(参数)并使用
props还有更严谨的写法 注明参数类型等

二、子传父

子组件绑定并注册事件
v-on:click="change"
change事件里注册事件，this.$emit("changename","传递的内容") //将内容作为参数传递给父组件

父组件绑定子组件注册的事件
<p @changename="update">改变内容</p>

vue父与子通信的更多相关文章

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

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

  2. vue 父向子组件传递数据，子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  3. vue父传子

    父组件传递数据给子组件用props,父组件中使用子组件,子组件用props接收父组件数据. Home父组件代码: <template> <div> {{test}} <! ...

  4. vue 父到子动态传值 子组件实时渲染

    近期项目中需要一个功能,根据选择不同的 团队片区 id 展示不同的数据,团队id 在父组件  数据在子组件中展示. 根据不同的团队 动态渲染数据总览. 父组件: <Cards ref=" ...

  5. vue学习记录⑤（组件通信-父与子）

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...

  6. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  7. vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  8. 总结vue中父向子，子向父以及兄弟之间通信的几种方式

    子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值 App.vue代码 <template> <div id="app"&g ...

  9. vue子父组件的通信

    Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0中去除了$broadcast和$dispatch方法. 1.父组件向子组件传值 a.app.vue父组件 <templ ...

随机推荐

  1. iOS-实现对象拷贝【对象拷贝】

    对象引用 NSCopying 代理 .h @interface xk : NSObject <NSCopying> @property (nonatomic, copy) NSString ...

  2. Window History对象

    History 对象属性 length 返回浏览器历史列表中的 URL 数量. History 对象方法 back() 加载 history 列表中的前一个 URL. window.history.b ...

  3. 使用json-lib-*.jar的JSON解析工具类

    使用json-lib-2.4-jdk15.jar JSON工具类: import java.util.List; import net.sf.json.JSONArray; import net.sf ...

  4. hanlp的基本使用--python(自然语言处理)

    hanlp拥有:中文分词.命名实体识别.摘要关键字.依存句法分析.简繁拼音转换.智能推荐. 这里主要介绍一下hanlp的中文分词.命名实体识别.依存句法分析,这里就不介绍具体的hanlp的安装了,百度 ...

  5. 使用fiddler抓手机包遇到问题

    1,http://blog.csdn.net/roland_sun/article/details/30078353 2,参照上面不周,不能实现用自己ip:8888端口下载出证书 解决办法,先从fid ...

  6. Chapter 3 Phenomenon——10

    It took six EMTs and two teachers — Mr. Varner and Coach Clapp — to shift the van far enough away fr ...

  7. 阿里云使用镜像安装freepbx

    安装freepbx真的是历经坎坷,不过也收获了一些东西.freepbx可以通过源码安装也可以通过镜像安装.源码安装我们会在另外一篇文章中讲到,这里我们讲到的是镜像安装,在本地进行镜像安装还是比较简单的 ...

  8. 使用httpClient连接池处理get或post请求

    以前有一个自己写的: http://www.cnblogs.com/wenbronk/p/6482706.html 后来发现一个前辈写的更好的, 再此感谢一下, 确实比我写的那个好用些 1, 创建一个 ...

  9. 使用DAO模式开发宠物管理系统---hellokitty

    宠物有狗和企鹅. 狗的属性有:编号.名称.亲密值.健康值.品种.所属主人编号. 企鹅的属性有:编号.名称.亲密值.健康值.性别.所属主人编号. 该系统中主人可以领养宠物,主人的属性有:编号.用户名.密 ...

  10. Java封装Redis常用操作

    package com.advance.Redis; import org.apache.log4j.Logger; import org.testng.annotations.Test; impor ...