leetcodeLCP templates animation cocoa search text clojure vue双向绑定 后台管理页面模板 支付网站建设 less用法 office2016修复 kb转mb html好看的字体样式 hbase端口 git登陆命令 maven插件 mysql临时表 python集合 python对象 python文件操作 java文件 java例子 java中的接口 javafor循环 java中new linux简介 linux系统命令大全 linux装机 unix操作系统下载 战地2单机地图 灼热峡谷 电视免费软件 手机模拟器下载 手机电脑模拟器 华为ff 数组求和 c4d挤压怎么用 ug拔模 密码翻译
当前位置: 首页 > 学习教程  > 编程语言

VUE中兄弟组件传值

2020/11/4 14:10:20 文章标签:

目录现有一个父组件,两个子组件,需要将子组件1中的数字改为3父组件子组件1子组件2方法1:组件2传值给父组件,然后在传值给组件1现在各个组件的完整代码父组件子组件1子组件2方法2:使用一个新VUE实例上的$on和$emit现在各…

目录

    • 现有一个`父组件`,两个`子组件`,需要将`子组件1`中的数字改为`3`
            • 父组件
            • 子组件1
            • 子组件2
        • 方法1:`组件2`传值给`父组件`,然后在传值给`组件1`
          • 现在各个组件的完整代码
            • 父组件
            • 子组件1
            • 子组件2
        • 方法2:使用一个新VUE实例上的`$on`和`$emit`
          • 现在各个组件的完整代码
            • 父组件,没有变化
            • 子组件1
            • 子组件2
            • transfor.js
      • $on的解释:[https://cn.vuejs.org/v2/api/#vm-on](https://cn.vuejs.org/v2/api/#vm-on)

现有一个父组件,两个子组件,需要将子组件1中的数字改为3

父组件
<template>
  <div class="APP">
    <div class="parent">
      这个是父组件
      <child1 class="child child1"></child1>
      <child2 class="child"></child2>
    </div>
  </div>
</template>

<script>
  import child1 from '../components/child1'
  import child2 from '../components/child2'

  export default {
    components: {child1, child2},
  }
</script>

<style scoped lang="less">
  .APP {
    width: 100vw;
    height: 100vh;
    padding: 100px;
    box-sizing: border-box;
    .parent {
      width: 100%;
      height: 100%;
      padding: 100px;
      box-sizing: border-box;
      border: 1PX solid salmon;
      display: flex;
      flex-direction: column;
    }
    .child1 {
      margin-bottom: 50px;
    }
    .child {
      border: 1PX solid salmon;
      flex: 1;
    }
  }
</style>


子组件1
<template>
  <div>
    这个是子组件1
  </div>
</template>

<script>
  export default {
  }
</script>
子组件2
<template>
  <div>
    这个是子组件2
  </div>
</template>

<script>
  export default {
  }
</script>

方法1:组件2传值给父组件,然后在传值给组件1

  1. 组件2中新增方法,给父组件传值
      change(){
        this.$emit('change',3)
      }
  1. 父组件接收参数
<child2 class="child" @change="change"></child2>
      change(arg) {
        this.child1Nam = arg
      }
  1. 父组件将值传给组件1,同时组件1接收传值
<child1 class="child child1" :child1Nam="child1Nam"></child1>
    props:{
      child1Nam:{
        type:Number,
        default(){
          return 1
        }
      }
    },
现在各个组件的完整代码
父组件
<template>
  <div class="APP">
    <div class="parent">
      这个是父组件
      <child1 class="child child1" :child1Nam="child1Nam"></child1>
      <child2 class="child" @change="change"></child2>
    </div>
  </div>
</template>

<script>
  import child1 from '../components/child1'
  import child2 from '../components/child2'

  export default {
    data() {
      return {
        child1Nam: 1
      }
    },
    components: {child1, child2},
    methods: {
      change(arg) {
        this.child1Nam = arg
      }
    }
  }
</script>

<style scoped lang="less">
  .APP {
    width: 100vw;
    height: 100vh;
    padding: 100px;
    box-sizing: border-box;
    .parent {
      width: 100%;
      height: 100%;
      padding: 100px;
      box-sizing: border-box;
      border: 1PX solid salmon;
      display: flex;
      flex-direction: column;
    }
    .child1 {
      margin-bottom: 50px;
    }
    .child {
      border: 1PX solid salmon;
      flex: 1;
    }
  }
</style>
子组件1
<template>
  <div>
    这个是子组件{{child1Nam}}
  </div>
</template>

<script>
  export default {
    props:{
      child1Nam:{
        type:Number,
        default(){
          return 1
        }
      }
    },
  }
</script>
子组件2
<template>
  <div @click="change">
    这个是子组件2
  </div>
</template>

<script>
  export default {
    methods:{
      change(){
        this.$emit('change',3)
      }
    }
  }
</script>

方法2:使用一个新VUE实例上的$on$emit

  1. 将代码恢复成初始的样子

  2. 新建transfer.js

import Vue from 'vue'
export const transfer = new Vue()
  1. 组件2中引用transfer.js,并新增方法
<script>
  import {transfer} from './transfer'
  export default {
    methods:{
      change(){
        transfer.$emit('change',3)
      }
    }
  }
</script>
  1. 组件1中引用transfer.js,并新增方法
<script>
  import {transfer} from './transfer'
  export default {
    data() {
      return {
        child1Nam: 1
      }
    },
    mounted() {
      transfer.$on('change', arg=>{
        this.child1Nam = arg
      })
    }
  }
</script>
现在各个组件的完整代码
父组件,没有变化
<template>
  <div class="APP">
    <div class="parent">
      这个是父组件
      <child1 class="child child1"></child1>
      <child2 class="child"></child2>
    </div>
  </div>
</template>

<script>
  import child1 from '../components/child1'
  import child2 from '../components/child2'

  export default {
    components: {child1, child2},
  }
</script>

<style scoped lang="less">
  .APP {
    width: 100vw;
    height: 100vh;
    padding: 100px;
    box-sizing: border-box;
    .parent {
      width: 100%;
      height: 100%;
      padding: 100px;
      box-sizing: border-box;
      border: 1PX solid salmon;
      display: flex;
      flex-direction: column;
    }
    .child1 {
      margin-bottom: 50px;
    }
    .child {
      border: 1PX solid salmon;
      flex: 1;
    }
  }
</style>
子组件1
<template>
  <div>
    这个是子组件{{child1Nam}}
  </div>
</template>

<script>
  import {transfer} from './transfer'
  export default {
    data() {
      return {
        child1Nam: 1
      }
    },
    mounted() {
      transfer.$on('change', arg=>{
        this.child1Nam = arg
      })
    }
  }
</script>

子组件2
<template>
  <div @click="change">
    这个是子组件2
  </div>
</template>

<script>
  import {transfer} from './transfer'
  export default {
    methods:{
      change(){
        transfer.$emit('change',3)
      }
    }
  }
</script>

transfor.js
import Vue from 'vue'
export const transfer = new Vue()

$on的解释:https://cn.vuejs.org/v2/api/#vm-on

引用文本

  • 用法:
    监听当前实例上的自定义事件。事件可以由vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
  • 示例:
vm.$on('test', function (msg) {
 console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

*特别注意:
$emit$on的事件必须在一个公共的实例上
vm.$emit('自定义事件名',要传送的数据)
vm.$on('事件名',callback)
$on的事件名要和$emit的事件名一致
$oncallback接收$emit的传送数据
*


本文链接:
http://www.dtmao.cc/news_show_350106.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?