其他分享
首页 > 其他分享> > Vue 组件传值的十种方法 敲黑板~~~~~敲黑板~~~~ 是十种

Vue 组件传值的十种方法 敲黑板~~~~~敲黑板~~~~ 是十种

作者:互联网

1. 父向子传值

- 父组件里子组件标签上绑定自定义属性,子组件通过props接受

代码实例
在这里插入图片描述

2.子向父传值

代码示例:在这里插入图片描述

3.eventBus 事件总线

3.1 在vueprototype原型上挂载是事件总线(main.js文件中)。

Vue.prototype.$eventBus = new Vue()

3.2 发送数据

this.$eventBus.$emit('事件名', 传递参数)

3.3 接受数据

    this.$eventBus.$on('事件名', (接受参数) => {
     	//进行操作
    })

代码实例:

要求:将Father.vue里面的数据传到Grandson.vue里面

在这里插入图片描述

4. ref

通过添加ref和$refs配合,也可以很方便的获取子组件,访问调用子组件的属性即方法。

用refs指定子组件: <子组件 ref=“ref名”/>
通过$refs访问子组件: this.$refs

代码实例:

<template>
   <div>
       父组件
       <Son1 ref="son1"/>
       <Son2 ref="son2"/>
   </div>
</template>
<script>
import Son1 from './Son1.vue'
import Son2 from './Son2.vue'

export default {
  components: {
    Son1,
    Son2
  },
  mounted () {
    console.log(this.$refs.son1)
  }
}
</script>

$refs可以获取到整个子组件。并且可以对齐进行操作
在这里插入图片描述

5. $children 获取子组件集合

语法:

this.$children

代码实例:

<template>
   <div>
       父组件
       <Son1/>
       <Son2/>
   </div>
</template>
<script>
import Son1 from './Son1.vue'
import Son2 from './Son2.vue'

export default {
  components: {
    Son1,
    Son2
  },
  mounted () {
    console.log(this.$children) 
  }
}
</script>

获取结果:

6.$parent获取父组件。

语法:

this.$parent

代码实例:
子组件中

<template>
   <div>
       子组件
   </div>
</template>
<script>
export default {
  mounted () {
    console.log(this.$parent)
  }
}
</script>

获取结果:
在这里插入图片描述

总结:ref,$children,$parent

  • 三种办法获取的是类似的
  • 一般是用ref和$parent获取是相对比较准确的比较多获取比较准确
  • 注意使用$children要注意,通过下标获取,一旦组件下标发生改变就会出问题

7.provide与inject 子孙组件传值

使用方法:

在这里插入图片描述

8.$attrs 父给孙进行传值

9. $listeners 孙级组件像父级以上传值

10.Vuex

Vuex是专为Vue.js应用程序开发的状态管理模块,它采用了集中式储存管理应用的所有组件的状态。

Vuex有两个特点:

  1. Vuex的数据是响应式的,当一个组件改变了Vue的中的转态,其他用到此状态的组件都会跟新
  2. 不能直接改变store里面的状态,必须通过store中的commit来提交修改,mutation里面修改

Vuex的五个核心分别是:

  1. states:储存状态。
  2. mutations:修改数据。
  3. getters:计算属性,对数据进行进一步技术并返回
  4. actions:可以包含任意异步操作,actions里面一定会有commit属性调用mutations里 面的方法
  5. models:模块拆分

Vuex这里我就不做详细解释了,之前写过一篇Vuex的帖子>>>>>>>>>>>Vuex

标签:Vue,parent,十种,黑板,获取,vue,组件,Vuex,children
来源: https://blog.csdn.net/weixin_58515303/article/details/121312165