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 组件之间数据传递(七)的更多相关文章

  1. 13. VUE 组件之间数据传递

    组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...

  2. vue 组件间数据传递

    父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...

  3. Vue组件之间数据交互与通信

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传 ...

  4. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...

  5. 8.【nuxt起步】-vue组件之间数据交互

    那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header, ...

  6. vue组件之间值传递四种方法汇总

    1.父组件获取子组件的数据和方法 $refs 子组件: <template> <div class="header"> <h3>{{ zz }} ...

  7. vue组件之间数据的传递

    父子组件通信 父组件向子组件传递数据: 1.通过子组件的 props 选项声明它期待获得的数据,用以接收父组件传过来的值. 2.在子组件标签中使用子组件props中创建的属性 3.父组件中注册子组件 ...

  8. vue 组件中数据传递

    //有种形式的传递:从父到子,从子到父,平行级别的传递//首先第一种:从父到子,用props属性绑定 //父级数据: new vue({ "el":"#app" ...

  9. VUE组件2数据传递

    传递数据 prop验证 除了传递数组,也可以传递对象 Vue.component('test',{ props:{ price:Number, unit: String } }) 如果price不是数 ...

随机推荐

  1. p3634 [APIO2012]守卫

    传送门 分析 1.先预处理出不被0覆盖的点,然后对每个点处理出在它左边离他最近的点和在他右边理他最近的点. 2.对于每个至少存在一个忍者的区间,先将它左右边界处理为不被0所覆盖.排序后将包含其他区间的 ...

  2. Entity Framework Tutorial Basics(12):Model First

    Model First development with Entity Framework: In the Model First approach, you create Entities, rel ...

  3. c++调用python引号的问题

    Boost.Python向python里面传递字符串时,引号是个很关键的问题. const char* cstr="hello \\\" world" // hello ...

  4. js教程--从入门到精通 第一篇 js的前世今生以及js中基本数据类型和引入方式

    1.Javascript前世今生   1.1.什么是Javascript       Javascript运行于Javascript [解释器/引擎]中的解释性脚本语言      Javascript ...

  5. 【Java学习】Java泛型详解

    1. 概述 在引入范型之前,Java类型分为原始类型.复杂类型,其中复杂类型分为数组和类.引入范型后,一个复杂类型就可以在细分成更多的类型.例如原先的类型List,现在在细分成List<Obje ...

  6. 循环中标签outer用法:break outer continue outer

    1.outer: break 如果不使用标签,break跳出里层for循环,使用break标签,则跳出两层循环 输出:i:0 j:0 i:0 j:1 public class breakTest { ...

  7. w2008 R2 401 - 未授权: 由于凭据无效,访问被拒绝。

    1.打开服务器的"IIS信息服务管理器"-->选择你发布的网站-->选择功能视图中的"身份验证"-->右键匿名身份验证,选择"编辑& ...

  8. WebStorm设置Themes

    1.首先去 http://www.phpstorm-themes.com/  选择你喜欢的主题,保存对应主题的xml文件到你本地 2.打开C:\Users\Administrator\.WebStor ...

  9. AB二进制

    Description 若将一个正整数化为二进制数,在此二进制数中,我们将数字1的个数多于数字0的个数的这类二进制数称为A类数,否则就称其为B类数. 例如: (13)10=(1101)2        ...

  10. jQuery回车触发事件

    举例: 需求:要求回车触发下一步 Html部分 <div style="margin-top: 25px;"> <a href="#" cla ...