vue 组件之间数据传递(七)
1、props:父组件 -->传值到子组件
app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男' 把该值传递给 子组件(B.vue),如下: App.vue
<template>
<div id="app">
<!--<router-view></router-view>-->
<parentTochild :sex="sexVal"></parentTochild>
</div>
</template> <script>
import parentTochild from './components/B'
export default {
name: 'app',
data: function () {
return {
sexVal:"女"
}
},
methods: { },
components: {
parentTochild
} }
</script>
B.vue
<template>
<div class="b_class"> <!--外边只允许有一个跟元素-->
<p>父组件传值给子组件</p>
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<p>sex:{{sex}}</p> </div>
</template>
<script>
export default {
data: function () {
return {
name: 'zs',
age: 22
}
},
props:['sex']
}
</script>
tips:
在父传值给子组件使用属性值:props; 理解成 “ 中介” 父组件绑定传递属性值(:sex="sexval") 子组件 获取属性值 props['sex'] 会添加到data 对象中
2、$emit:子组件 -->传值到父组件 在B.vue 子组件添加一个点击事件为例子
@click="sendMs
<input type="button" @click="sendMsg" value="子组件值传父组件">
在调用该函数后使用$emit方法传递参数 (别名,在父组件作为事件名称, 值);
methods: {
sendMsg: function () {
this.$emit('childMsg', '值来自---子组件值')
}
}
App.vue
在父组件中 使用该别名(作为事件名使用),调用方法 childEvent 返回子组件传过来的值
<p>{{message}}</p>
<!--<router-view></router-view>-->
<parentTochild :sex="sexVal" @childMsg = "childEvent"></parentTochild>
data: function () {
return {
sexVal: "女",
message: '' }
},
methods: {
childEvent: function (msg) {
this.message = msg; // msg 来自子组件
}
}
点击 “按钮”值会传到 父组件中。 组件之间不能互相传值。
vue 组件之间数据传递(七)的更多相关文章
- 13. VUE 组件之间数据传递
组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...
- vue 组件间数据传递
父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...
- Vue组件之间数据交互与通信
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传 ...
- React和Vue组件间数据传递demo
一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...
- 8.【nuxt起步】-vue组件之间数据交互
那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header, ...
- vue组件之间值传递四种方法汇总
1.父组件获取子组件的数据和方法 $refs 子组件: <template> <div class="header"> <h3>{{ zz }} ...
- vue组件之间数据的传递
父子组件通信 父组件向子组件传递数据: 1.通过子组件的 props 选项声明它期待获得的数据,用以接收父组件传过来的值. 2.在子组件标签中使用子组件props中创建的属性 3.父组件中注册子组件 ...
- vue 组件中数据传递
//有种形式的传递:从父到子,从子到父,平行级别的传递//首先第一种:从父到子,用props属性绑定 //父级数据: new vue({ "el":"#app" ...
- VUE组件2数据传递
传递数据 prop验证 除了传递数组,也可以传递对象 Vue.component('test',{ props:{ price:Number, unit: String } }) 如果price不是数 ...
随机推荐
- 高性能MySQL笔记-第5章Indexing for High Performance-004怎样用索引才高效
一.怎样用索引才高效 1.隔离索引列 MySQL generally can’t use indexes on columns unless the columns are isolated in t ...
- 1027C Minimum Value Rectangle
传送门 题目大意 有n个木棍,让你选4根使得组成的矩形的周长的平方除以面积最小. 分析 这个题看起来就是一个需要证明的贪心,下面我们来证明一下: 所以我们只需要枚举一边所有的a的可能值,然后b就是比a ...
- (数组)对数组中的数字加1(plus one)
题目:https://www.nowcoder.com/practice/4d135ddb2e8649ddb59ee7ac079aa882?tpId=46&tqId=29111&tPa ...
- JaVA web服务器配置
1:第一是下载好Eclipse开发工具,这里不做叙述,自行下载安装. 2:使用Eclipse开发WEB项目,启动Eclipse,选择File--->new --->other---> ...
- MATLAB数字图像处理(二)图像增强
1 图像增强 1.1 直方图均衡化 对于灰度图像,可以使用直方图均衡化的方法使得原图像的灰度直方图修正为均匀的直方图. 代码如下: I2=histeq(I1); ...
- DropDownList判断值是否存在下拉列表中
//1.值是text string aa= Request.QueryString["CallReason"].ToString();//获取传值 if (DropDownList ...
- windows下部署icescrum
软件151 卢炜杰 一.安装JDK 1.下载JDK 地址:http://www.oracle.com/technetwork/java/javaee/downloads/index.html 选择相 ...
- Linux计划任务 定时任务 Crond 配置详解 crond计划任务调试 sh -x 详解 JAVA脚本环境变量定义
一.Crond 是什么?(概述) crontab 是一款linux系统中的定时任务软件用于实现无人值守或后台定期执行及循环执行任务的脚本程序,在企业中使用的非常广泛. 现在开始学习linux计 ...
- P3321 [SDOI2015]序列统计 FFT+快速幂+原根
\(\color{#0066ff}{ 题目描述 }\) 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S.小C用这 ...
- PAT天梯赛L1-054 福到了
题目链接:点击打开链接 "福"字倒着贴,寓意"福到".不论到底算不算民俗,本题且请你编写程序,把各种汉字倒过来输出.这里要处理的每个汉字是由一个 N x N 的 ...