vue 实现,子组件向父组件 传递数据
首先理清组件之间的关系
组件与组件之间,还存在着不同的关系。父子关系与兄弟关系(不是父子的都暂称为兄弟吧)。
父子组件
父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件。
先写子组件:
绑定一个单击事件
<el-button type="primary" icon="el-icon-search" @click="search" style="background: #5b6270; border: none;">搜索</el-button>
定义数组:用来存值,然后传递给父组件
export default {
data() {
return {
childByValue:[] //先定义一个数组
};
}
}
methods: {
search: function() {
const inp = this.input;
if (inp ==="") {
this.selectAll(); //如果为空 则执行selectAll去
} else {
this.$axios.get('http://localhost:9999/search?productName=' + inp).then(res => {
if (res.data === "error") {
alert("抱歉,没有查询到你需要的商品");
} else {
this.childByValue = res.data; //给数组赋值
this.$emit('childByValue', this.childByValue) //发射、广播出去 主要这里
}
})
}
}
}
然后子组件就写完了
父组件:
使用components 翻译就是:组成的意思
import headers from './Head.vue' //导入子组件
export default {
components: {
headers: headers //这里是import 导入的名字一致
}
}
使用子组件
<headers @childByValue="childByValue"></headers>
截图:
另外 还需要绑定事件来接受数据
methods: {
childByValue(value) {
console.log(value);//接收子组件的数据然后你想干嘛就干嘛
}
}
vue 实现,子组件向父组件 传递数据的更多相关文章
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Vue子页面给父页面传递数据
子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件-子组件向父组件传递数据-自定义事件
自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!
- vue子组件向父组件传递参数的基本方式
子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...
- vuejs子组件向父组件传递数据
子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
随机推荐
- GUI程序原理分析
1,Qt 是一套跨平台的程序设计库,这套程序设计库主要用于 GUI 方面的程序设计开发,所以本系列博文主要是利用C++介绍 GUI 程序设计技术: 2,命令行应用程序: 1,命令行应用程序的特点(Co ...
- python UnicodeEncodeError: 'gbk' codec can't encode character ...
使用Python写文件的时候,或者将网络数据流写入到本地文件的时候,大部分情况下会遇到:UnicodeEncodeError: 'gbk' codec can't encode character ' ...
- 1-ES简单介绍
一.ES简单介绍 ES:Elastic Search,一个分布式.高扩展.高实时的搜索与数据分析引警.它可以准实时地快速存储.搜索.分析海量的数据. 1.ES实现原理 a.用户数据提交到ES数据库中 ...
- 42. Trapping Rain Water (JAVA)
Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...
- PAT Basic 1027 打印沙漏 (20 分)
本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐:相邻两 ...
- pandas的数据统计函数
# 1汇总类统计 # 2唯一去重和按值计数 # 3 相关系数和协方差 import pandas as pd # 0 读取csv数据 df = pd.read_csv("beijing_ti ...
- IP地址转二进制
例如216这个数 216 = 1 * 128 +1 * 64 + 0 * 32 + 1 * 16 + 1 * 8 + 0 * 4 + 0 * 2 + 0 * 1 提取乘号之前的数字我们得到所代表的二进 ...
- 通过spring工具类获取bean
package xxx; import org.springframework.beans.BeansException; import org.springframework.beans.facto ...
- 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- vue项目中 指令 v-html 中使用过滤器filters功能
转载于简书 链接:http://www.jianshu.com/p/29b7eaabd1ba 问题 2.0 filters only work in mustache tags and v-bind. ...