Vue学习笔记【25】——Vue组件(组件间传值)
父组件向子组件传值
组件实例定义方式,注意:一定要使用
props
属性来定义父组件传递过来的数据
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的消息'
},
components: {
son: {
template: '<h1>这是子组件 --- {{finfo}}</h1>',
props: ['finfo']
}
}
});
</script>
使用
v-bind
或简化指令,将数据传递到子组件中:
<div id="app">
<son :finfo="msg"></son>
</div>
子组件向父组件传值
原理:父组件将方法的引用,传递到子组件内部,子组件在内部调用父组件传递过来的方法,同时把要发送给父组件的数据,在调用方法的时候当作参数传递进去;
父组件将方法的引用传递给子组件,其中,
getMsg
是父组件中methods
中定义的方法名称,func
是子组件调用传递过来方法时候的方法名称
<son @func="getMsg"></son>
子组件内部通过
this.$emit('方法名', 要传递的数据)
方式,来调用父组件中的方法,同时把数据传递给父组件使用
<div id="app">
<!-- 引用父组件 -->
<son @func="getMsg"></son>
<!-- 组件模板定义 -->
<script type="x-template" id="son">
<div>
<input type="button" value="向父组件传值" @click="sendMsg" />
</div>
</script>
</div>
<script>
// 子组件的定义方式
Vue.component('son', {
template: '#son', // 组件模板Id
methods: {
sendMsg() { // 按钮的点击事件
this.$emit('func', 'OK'); // 调用父组件传递过来的方法,同时把数据传递出去
}
}
});
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getMsg(val){ // 子组件中,通过 this.$emit() 实际调用的方法,在此进行定义
alert(val);
}
}
});
</script>
使用 this.$refs
来获取DOM元素和组件引用
<div id="app">
<div>
<input type="button" value="获取元素内容" @click="getElement" />
<!-- 使用 ref 获取元素 -->
<h1 ref="myh1">这是一个大大的H1</h1>
<hr>
<!-- 使用 ref 获取子组件 -->
<my-com ref="mycom"></my-com>
</div>
</div>
<script>
Vue.component('my-com', {
template: '<h5>这是一个子组件</h5>',
data() {
return {
name: '子组件'
}
}
});
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
// 通过 this.$refs 来获取元素
console.log(this.$refs.myh1.innerText);
// 通过 this.$refs 来获取组件
console.log(this.$refs.mycom.name);
}
}
});
</script>
Vue学习笔记【25】——Vue组件(组件间传值)的更多相关文章
- vue学习笔记(1)—— 组件化实现todoList
一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue学习笔记:vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- Vue学习笔记(三)组件间如何通信传递参数
一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...
- Vue学习笔记之Vue组件
0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
- vue学习笔记(五)— 组件通信
关于vue父子组件通信 作者:狐狸家的鱼 本文链接:vue组件通信 GitHub:sueRimn 如果组件是一个单页面,组件之间存在父子关系,数据传递就需要根据父子不同的地位使用不同的办法. 借助新建 ...
- Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
随机推荐
- 进程调试--进程启动VS自动附加
程序启动VS自动附加到进程调试 1. 打开注册表regedit 2. HKEY_LOCAL_MACHINE\Software\Microsoft\Windows NT\currentversion\i ...
- OpenCV常用基本处理函数(8)图像变换
傅里叶变换 傅里叶变换在实际中有非常明显的物理意义,设f是一个能量有限的模拟信号,则其傅里叶变换就表示f的频谱. 图像的频率是表征图像中灰度变化剧烈程度的指标,是灰度在平面空间上的梯度.如:大面积的沙 ...
- Anaconda 安装 pytorch报错解决方法
一.安装Pytorch: # -c 指定用pytorch镜像源下载软件conda install pytorch torchvision cpuonly -c pytorch 报错: 二.配置: ch ...
- CSP2019赛前小复习:
虽然觉得复习也没有什么用,还不吃好睡好,保持好心情. SA: 坑就那几个. \(s[0]=s[n+1]=-1\). 和\(rank\)交换的\(tp\)数组的\(tp[n+1]=0\). 一般加上这两 ...
- PHP dir() 函数
使用 dir() 函数: <?php$d = dir(getcwd()); echo "Handle: " . $d->handle . "<br> ...
- 外部表及oracle数据库内存
create table alert1 (log varchar2(1000))2 organization external3 (type oracle_loader4 default direct ...
- Kali Linux下运行nfc工具测试!
由于Kali本身就集成了很多nfc工具,用起来很方便,再加上一个acr122u读卡器,来尝试PJ学校水卡! 首先安装驱动,到龙杰官网下载Linux的,解压后进入自己Linux发行版,Kali的是Deb ...
- (转)将SVN从一台服务器迁移到另一台服务器(Windows Server VisualSVN Server)
转:http://blog.sina.com.cn/s/blog_855a24030102xp9q.html 服务器环境: Windows Server 2012 软件版本: VisualSVN-S ...
- Mac启动时:boot task failed:fsck-safe处理办法
mac系统启动到一半,然后突然关机,查看启动信息发现:boot task failed:fsck-safe 处理方法,clover启动的时候按空格,然后选择sigle mode. 进入使用命令:fsc ...
- java sigar 系统监控
<dependency> <groupId>org</groupId> <artifactId>sigar</artifactId> < ...