Vue常用的三种传值方式:

  • 父传子

  • 子传父

  • 非父子传值

引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。

  1. 父组件向子组件传值:

  父组件:

  1. <template>
  2. <div>
  3. 父组件:
  4. <input type="text" v-model="name">
  5. <br>
  6. <br>
  7. <!-- 引入子组件 -->
  8. <child :inputName="name"></child>
  9. </div>
  10. </template>
  11. <script>
  12. import child from './child'
  13. export default {
  14. components: {
  15. child
  16. },
  17. data () {
  18. return {
  19. name: ''
  20. }
  21. }
  22. }
  23. </script>

  子组件:

  1. <template>
  2. <div>
  3. 子组件:
  4. <span>{{inputName}}</span>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. // 接受父组件的值
  10. props: {
  11. inputName: String,
  12. required: true
  13. }
  14. }
  15. </script>

  2. 子组件向父组件传值:

  子组件:

  1. <template>
  2. <div>
  3. 子组件:
  4. <span>{{childValue}}</span>
  5. <!-- 定义一个子组件传值的方法 -->
  6. <input type="button" value="点击触发" @click="childClick">
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. data () {
  12. return {
  13. childValue: '我是子组件的数据'
  14. }
  15. },
  16. methods: {
  17. childClick () {
  18. // childByValue是在父组件on监听的方法
  19. // 第二个参数this.childValue是需要传的值
  20. this.$emit('childByValue', this.childValue)
  21. }
  22. }
  23. }
  24. </script>

  父组件:

  1. <template>
  2. <div>
  3. 父组件:
  4. <span>{{name}}</span>
  5. <br>
  6. <br>
  7. <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
  8. <child v-on:childByValue="childByValue"></child>
  9. </div>
  10. </template>
  11. <script>
  12. import child from './child'
  13. export default {
  14. components: {
  15. child
  16. },
  17. data () {
  18. return {
  19. name: ''
  20. }
  21. },
  22. methods: {
  23. childByValue: function (childValue) {
  24. // childValue就是子组件传过来的值
  25. this.name = childValue
  26. }
  27. }
  28. }
  29. </script>

  3. 非父子组件传值:

  非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。

  公共  bus.js

  1. //bus.js
  2. import Vue from 'vue'
  3. export default new Vue()

  组件A:

  1. <template>
  2. <div>
  3. A组件:
  4. <span>{{elementValue}}</span>
  5. <input type="button" value="点击触发" @click="elementByValue">
  6. </div>
  7. </template>
  8. <script>
  9. // 引入公共的bug,来做为中间传达的工具
  10. import Bus from './bus.js'
  11. export default {
  12. data () {
  13. return {
  14. elementValue: 4
  15. }
  16. },
  17. methods: {
  18. elementByValue: function () {
  19. Bus.$emit('val', this.elementValue)
  20. }
  21. }
  22. }
  23. </script>

  组件B:

  1. <template>
  2. <div>
  3. B组件:
  4. <input type="button" value="点击触发" @click="getData">
  5. <span>{{name}}</span>
  6. </div>
  7. </template>
  8. <script>
  9. import Bus from './bus.js'
  10. export default {
  11. data () {
  12. return {
  13. name: 0
  14. }
  15. },
  16. mounted: function () {
  17. var vm = this
  18. // 用$on事件来接收参数
  19. Bus.$on('val', (data) => {
  20. console.log(data)
  21. vm.name = data
  22. })
  23. },
  24. methods: {
  25. getData: function () {
  26. this.name++
  27. }
  28. }
  29. }
  30. </script>

每日壹题:

  打印出 1 - 10000 之间的所有对称数
  1. console.log([...Array(10000).keys()].filter((x) => {
  2. return x.toString().length > 1 && x === Number(x.toString().split('').reverse().join(''))
  3. }))

Vue 常用三种传值方式的更多相关文章

  1. django之创建第7-6-第三种传值方式

    1.创建bar.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. 【转】vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  3. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  4. mybatis三种传值方式

    第一种:按序列传参(dao层的函数方法)[sql] Public User selectUser(String name,String area); 对应的Mapper.xml [sql] <s ...

  5. Vue中常用的三种传值方式

    父传子 父子组件的关系可以总结为prop向下传递,事件向上传递.父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息. 父组件: <template> <div> ...

  6. Vue的七种传值方式

    目录 1,父传子 2,子传父 3,兄弟组件传值 4,父组件使用子组件的数据和方法 5,子组件使用父组件的数据和方法 6,Vuex传值 6.1,定义store 6.2,挂载 6.3,使用 7,路由传值 ...

  7. (二)微信小程序的三种传值方式

    1.全局变量 app.js里 App({ //全局变量 globalData: { userInfo: null, host: 'http://localhost:8080/data.json' } ...

  8. Vue中两种传值方式

    第一种:通过url传参,直接在地址后加? ,通过this.$route.query对象获取 第二种:通过路由传参,修改路由,通过this.$route.params对象获取

  9. vue.js 三种方式安装--npm安装

    Vue.js是一个构建数据驱动的 web 界面的渐进式框架.     Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合.     ...

随机推荐

  1. 分表分库解决方案(mycat,tidb,shardingjdbc)

    公司最近有分表分库的需求,所以整理一下分表分库的解决方案以及相关问题. 1.sharding-jdbc(sharding-sphere) 优点: 1.可适用于任何基于java的ORM框架,如:JPA. ...

  2. Java高级特性——流

    以上就是这段时间学习完流的知识以后我的总结,.mmap文件可以去我的github上获取:https://github.com/xiaozhengyu/StudyNotes.git

  3. Django 链接MySQL及数据操作

    Django 链接MySQL Django创建的项目自带的数据库是SQLite3,我们想要链接MySQL的话,需要更改settings.py中的配置 1.在MySQL中创建好数据库,Django项目不 ...

  4. 「Luogu P3395」路障 解题报告

    点开有惊喜 其实是题面 这D1T1给的很有面子! 我居然做的来! 从左上角走到右上角 然后n<=1000 所以果断放弃DFS,选择BFS 思路还是一样的BFS 证明: 走到一个点的时间越早越好( ...

  5. bootstrap:导航下拉菜单

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  6. 爆破linux密码 $6$3uwqC9JI$d9iPRmTDAoXs/IbsplxS3iyeErHqw7fUycacXNHyZk1UCSwFEydl515/zXN7OEwHnyUaqYcNG

    #!/usr/bin/env python # -*- coding:UTF-8 -*- import crypt import sys # 哈希密码的前两位就是盐的前两位,这里我们假设盐只有两位. ...

  7. ASCII、UNICODE、UTF

    在计算机中,一个字节对应8位,每位可以用0或1表示,因此一个字节可以表示256种情况. ascii 美国人用了一个字节中的后7位来表达他们常用的字符,最高位一直是0,这便是ascii码. 因此asci ...

  8. Yolo V3整体思路流程详解!

    结合开源项目tensorflow-yolov3(https://link.zhihu.com/?target=https%3A//github.com/YunYang1994/tensorflow-y ...

  9. java架构之路(多线程)synchronized详解以及锁的膨胀升级过程

    上几次博客,我们把volatile基本都说完了,剩下的还有我们的synchronized,还有我们的AQS,这次博客我来说一下synchronized的使用和原理. synchronized是jvm内 ...

  10. php5升php7代码修改整理

    1. 为什么升级至php7 a.安全需要 过早以至于不维护的php版本难免会有未修补的漏洞,安全性要求较高的行业是要及时升级的. b.性能提升(开启opcache hugepage) 据说性能提升一倍 ...