1.props实现父组件向子组件传递数据

子组件可以通过props接收到来自父组件的数据,并且是单向绑定的。也就是说,数据不能从子组件反向传递。

2.$ref实现子组件向父组件通信

来自官方非常难理解的解释:

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例

意思就是,如果ref用在子组件上,是作为子组件的一个索引,通过$ref可以获取到子组件里面的属性和方法。如果ref在dom元素上面使用,可以通过ref获取到该dom的属性集合。

通过$ref实现通信:

<template>
<div>
<h1>这是父组件</h1>
<Child ref="msg"/>
</div>
</template> <script>
import Child from '@/views/Child';
export default{
components:{Child},
mounted(){
       console.log(this.$ref.msg);//可以获取到子组件的属性和方法
this.$ref.msg.getMessage('这是子组件');
},
}
</script>
<template>
<h2>{{message}}</h2>
</template> <script>
export default{
 data(){
      message:'',
    },
   methods:{
    getMessage(m){
      this.message = m;
    },
   },
}
</script>

prop和$ref的区别是:

prop是用于父组件向子组件传递数据。

$ref着重于子组件的索引,带领父组件查找到子组件的属性和方法,并不适合用来做数据之间的通信。

3.$emit和$ref的区别

我的理解是,$ref是父组件向子组件索要子组件的属性和方法,而$emit是子组件告知父组件调用父组件的方法并可以从子组件传递参数到父组件。

Vue读书笔记:关于$ref、props和$emit的更多相关文章

  1. Vue学习笔记:Ref的使用

    官网上的说明 1.了解Vue中的$refs在Vue中是怎么访问到DOM元素的 <div id="app"> <h1>{{ message }}</h1 ...

  2. vue 父子组件传值:props和$emit

    <!--子组件页面--> <template> <div class="hello"> <!-- 添加一个input输入框 添加keypr ...

  3. React 读书笔记

    序言: 领导安排部门同事本月内看一本跟自己职业相关的书籍, 根基类的书籍已经看过了,重复阅读的意义不大,所以我平时看的都是视频,也许是视频作者没有出书的条件,也许是现在出书看的人越来越少了,也许有其他 ...

  4. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  5. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  6. Vue学习笔记进阶篇——Render函数

    基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template ...

  7. Vue:实践学习笔记(3)——组件使用

    Vue:实践学习笔记(3)——组件使用 全局注册 1.注册组件 Vue.component('my-component',{ //选项 }) 说明:my-component就是注册的组件自定义的标签名 ...

  8. vue学习笔记(1)

    1.检测变化 <ul> <li v-for="item in list">{{item}}</li> </ul> <scrip ...

  9. 从零开始的vue学习笔记(四)

    组件注册 组件名 Vue.component('my-component-name', { /* ... */ }) 这里的my-component-name就是组件名,组件名的取法可以参考指南 ke ...

随机推荐

  1. css浮动导致的高度塌陷问题及清楚浮动的方法

    浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

  2. 关于KO信息

    最近写大论文查到KO也是可以用于分类的一种信息. 如何使用KEGG进行通路富集http://blog.sciencenet.cn/blog-364884-779116.html kegg 数据库学习笔 ...

  3. mysql和eclipse连接jdbc驱动配置

    环境Windows10 eclipse 64位 MySQL 一:资料准备 (MySQL,eclipse下载安装不在赘述) 配置好MySQL环境后 下载jdbc地址http://dev.mysql.co ...

  4. 快速登录MySQL数据库

    [root@tdh51 docker]# mysql -h localhost -u transwarp -p$(cat /etc/transwarp-manager/master/db.proper ...

  5. 三维点集拟合:平面拟合、RANSAC、ICP算法

    ACM算法分类:http://www.kuqin.com/algorithm/20080229/4071.html 一: 拟合一个平面:使用SVD分解,代码里面去找吧 空间平面方程的一般表达式为: A ...

  6. 开启RxSwift之旅——开篇

    开启RxSwift之旅——开篇 RxSwift 是 ReactiveX 在 Swift 下的实现.ReactiveX 是一个通过使用可观察序列来组合异步和基于事件的程序的库. 很多地方通常把 Reac ...

  7. MongoDB_"Error parsing YAML config file: yaml-cpp: error at line 3, column 9: illegal map value"解决方法

    在启动配置文件的时候,系统报错:Error parsing YAML config file: yaml-cpp: error at line 3, column 9: illegal map val ...

  8. Brain Network (hard) CodeForces - 690C 简单倍增 + 一些有趣的推导

    Code: #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ...

  9. jmeter图片的下载

    1.jmeter下载文件 首先添加一个线程组,然后在线程组里面添加一个http请求,因为是获取数据,所有是get请求,写好下载的地址 1.添加线程组 :右键测试计划,添加-Threads(Users) ...

  10. json字符串通俗的介绍

    json 的本质就是字符串,按key:value这种键值对的格式定义的字符串 json就是传递javascript对象的语法,json只有两种结构,对象和数组,这两种结构嵌套和组合,来表示各种各样的数 ...