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>,把教程里的例子模仿一遍,理解用法.不推荐 ...
随机推荐
- vue部分问题
[color=#00b050]学 vue 的看过来,vue-cli 挺好用的,但是遇到具体情况还得做一部分调整和配置默认你已经成功启动 vue-cli 1.使用 scsscnpm i node-sas ...
- 2018/8/26学习Mysql笔记
SELECT * FROM product; #.基本增删改查 #新增 #需求:添加一条数据到产品表 产品名称为苹果手机 卖价为5000 ); #删除 #需求:删除产品表中id=20的数据 ; #需求 ...
- [REPRINT]MODIFYING USER ACCOUNTS(usermod)
http://landoflinux.com/linux_usermod_command.html Append Additional Groups to an exiting account use ...
- hdu 1757 A Simple Math Problem (矩阵快速幂)
Description Lele now is thinking about a simple function f(x). If x < 10 f(x) = x. If x >= 10 ...
- element-uI隐藏表格头部
1.表格结构定义 :show-header="hiddenTableHeader" 2. data里面定义 hiddenTableHeader:false,
- svn服务端安装、迁移教程、Eclipse切换svn连接库
svn服务端安装.迁移教程.Eclipse切换svn连接库 安装教程 1.下载svn服务端安装程序 2.运行程序,安装 这里端口号根据自己定义,避免与其他程序冲突 到这里就安装完成 迁移教程 这里举例 ...
- Panel
在Panel上绘图的实现 近期制作了FDS的一个建模工具,由于知识有限,做出的效果是2D的.昨天上课的时候看老师画一个长方体,突然想到,为什么不给普通的2D图形加画上几条直线,就能实现2D图形的3D视 ...
- 【Tomcat】1.Tomcat在Windows系统的安装和使用
1.下载与安装 安装Tomcat的[前提条件]是安装好JDK或者JRE(本文略过)Tomcat在Windows系统中可以通过[压缩包]或[安装包]来安装建议使用[安装包]来简化安装步骤登录官网http ...
- ssh登录失败的常见问题分析
操作系统为了安全,一般只允许普通用户使用public_key登录,这时如果以root用户登录,就会出现各种错误.下面是常见的错误及解决方案. Permission denied (publickey) ...
- JAVA StringUtils方法全集
StringUtils方法全集 org.apache.commons.lang.StringUtils中方法的操作对象是java.lang.String类型的对象,是JDK提供 的String类型操作 ...