Vue - 传值

Vue 传值有两种:
1)父组件向子组件传值(属性传值,Prop传值)
2)子组件向父组件传值

一、父组件向子组件传值(Prop传值)

请见我的Prop传值。

示例:
在父组件的模板中:

<template>
  <div id="app">
    <users v-bind:users="users"></users>  # 这个"users"是父组件里面的data,传值给子组件users,使用v-bind:来传值,前面的key(users)就是子组件要接受的
  </div>
</template>

在子组件中:

<script>
  export default {
    props: ['users'],   # 这里定义users,在父组件才能传值
  }
</script>

或者验证的方式(推荐):
<script>
  props: {
    users:{
      type: Array,
      required: true
    }
  }
</script>

属性传值,可以传递两种东西:
1)传值
2)传递引用

创引用,一种是我们的数组(array),一种是我们的对象(object)。传值的话,可以传递字符串,可以传递boolean,number等这些东西,

二、子级向父级传递:

图片.png

此方法名也就是父级使用时候绑定的事件方法名:


图片.png

父级实现方法:


图片.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 在vue项目中,不可避免的会在不同组件之间进行传值 ,不同需求下有各式各样的传值方式。就比如说,兄弟组件传值...
    喜欢未来你的我阅读 1,412评论 2 12
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,986评论 19 139
  • 属性传值(父传子)传值:string number boolean引用:array object 改变一个地方的数...
    走停2015_iOS开发阅读 184评论 0 1
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,107评论 4 129
  • 详见:http://wiki.jikexueyuan.com/project/swift/chapter2/16_...
    sayHellooX阅读 384评论 0 0