vue组件的五种传值方法(父子\兄弟\跨组件)

简介: vue组件的五种传值方法(父子\兄弟\跨组件)

一、props/$emit父子组件传值:

父传子 (自定义属性 props)
父组件向子组件传参,通过自定义属性的方式进行传参,在子组件中使用prop定义自定义的属性,然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上,那在子组件中props里面的自定义属性可以直接使用。

//父组件代码   渲染子组件
<Son  :name="name" />

 // 子组件代码,接受父参数
export default {
   
  props: {
   
    name:{
   
                type:String,
                default:"我是默认字符串"//定义参数默认值
                required:false//定义参数是否必须值
            }
  }
}

子传父 (自定义事件 this.$emit)
子组件向父组件传数据使用自定义事件, vue 组件提供了一个emit(‘自定义事件名’, 传递的数据) ),子组件传递数据时,触发响应的事件函数,就会自动触发通过$emit给父组件绑定的自定义事件,自定义事件接受一个参数,参数就是子组件传递过来的数据。

// 父组件代码,渲染子组件
<Son   @setValue="valueFn" />
export default{
   
  method:{
   
    valueFn(value) {
   }
  }
}
// 子组件代码
this.$emit('setValue', this.say)

二、ref与parent/children父子组件传值:

父传子

//父组件
<Home ref="home"></Home>
<button @click="toValue">点击</button>
methods:{
   
  toValue(){
   
          this.msg = "这是父组件的值";
          this.$refs.home.setMsg(this.msg);
   }
}
//子组件
<div class="home">
      {
   {
   msg}}
 </div>
    methods:{
   
        setMsg(val){
   
            this.msg = val;
        }
    }

子传父(如果子组件是公共组件,需判断父组件是否具有该方法)
//父组件
<Home ref="home"></Home>
methods:{
   
  toValue(val){
   
          this.msg = val

   }
}
//子组件
<div class="home">
<button @click="setMsg">点击</button>
 </div>
    methods:{
   
        setMsg(val){
   
             this.$parent.toValue(this.msg);
        }
    }

三、兄弟之间传参
兄弟组件之间的数据传递,通过eventBus来做中间的桥梁,传输方通过中间组件调用 emit 传数据,接收方通过on 接受数据,两者之间的自定义属性名保持一致。

// 传输方组件调用方式
import Bus from '@/EventBus.js'
Bus.$emit('pass-value', this.say);

// 接收方接受参数
import Bus from '@/EventBus.js'

created() {
   
  Bus.$on('pass-value', val => {
   
     this.sibilingValue = val;
  })
}

四 $attrs/$listeners隔代组件传值(爷孙组件参数互传)

$attrs

1.包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外);
2.当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=“$attrs” 传入内部组件。通常配合 interitAttrs 选项一起使用。
$listeners
1.包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。
2.它可以通过 v-on=“$listeners” 传入内部组件。
简单来说:$attrs 与$listeners是两个对象,$attrs 里存放的是父组件中绑定的非 Props 属性,$listeners 里 存放的是父组件中绑定的非原生事件。
爷传孙($attrs)

    //爷组件
    <div id="app">
      <Home :msg="msg"></Home>
    </div>
    //父组件(父组件的操作最简单,但不做就会传不过去)

    <div class="home">
      <Sun v-bind="$attrs"></Sun>
    </div>
    //孙组件
    <div class="sun">
      {
   {
    msg }}
    </div>
    //props直接接受 
    props:{
    msg:String, }

孙传爷($listeners)

//爷组件
    <div id="app">
      <Home @setVal="setVal">></Home>
    </div>
    methods:{
    setVal(val){
    this.msg = val; } }
    //父组件(父组件的操作最简单,但不做就会传不过去)

    <div class="home">
      <Sun v-on="$listeners"></Sun>
    </div>
    //孙组件
    <div class="sun">
      <button @click="toVal">点我</button>
    </div>
    methods:{
    toVal(){
    this.$emit("setVal",this.msg) } }

五、通过Vuex数据共享

通过Vuex存储数据, Vuex是一个专为vue.js 应用程序开发的状态管理模式, 它采用集中式存储管理数据,以相应的规则保证状态以一种可预测的方式发生改变, 一变全变,同步更新数据。

// 注册代码
const store = new Vue.Store({
   
  state:{
   
    count: 100
  },
  mutations: {
   
    addCount(state, val = 1) {
   
      state.count += val;
    }subCount(state, val = 1) {
   
      state.count -= val;
    }
  }
})

// 组件调用
this.$store.commit('addCount');  // 加 1
this.$store.commit('subCount');  // 减 1
相关文章
|
21小时前
|
JavaScript 搜索推荐 前端开发
Vue SSR 预渲染的广泛应用场景及其优势
【10月更文挑战第23天】Vue SSR 预渲染技术在众多领域都有着广泛的应用价值,可以显著提升网站的性能、用户体验和搜索引擎优化效果。随着技术的不断发展和完善,其应用场景还将不断拓展和深化
16 2
|
22小时前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
19 9
|
23小时前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
23小时前
|
监控 JavaScript 前端开发
Vue 异步渲染
【10月更文挑战第23天】Vue 异步渲染是提高应用性能和用户体验的重要手段。通过理解异步渲染的原理和优化策略,我们可以更好地利用 Vue 的优势,开发出高效、流畅的前端应用。同时,在实际开发中,要注意数据一致性、性能监控和调试等问题,确保应用的稳定性和可靠性。
|
1天前
|
移动开发 JavaScript 前端开发
"Vue开发者必看:一篇文章教你如何实现px自动转换vw或rem,轻松应对H5页面响应式设计挑战!"
【10月更文挑战第23天】在Vue项目中实现px到vw或rem的自动转换,可以使用PostCSS插件。首先安装`postcss-loader`,然后添加`postcss-px-to-viewport`和`postcss-pxtorem`插件,并在`postcss.config.js`中配置。配置完成后,直接在Vue组件中使用px单位编写样式,PostCSS会自动转换为vw或rem。这样可以简化开发流程,提高代码的可维护性和页面的响应式设计能力。
7 0
|
6天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
22 1
|
3天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
4天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
33 18
|
4天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
15 7
|
4天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
13 6