vue框架传值常用的有:

1、父传子,在父组件里面的子组件上通过v-bind绑定一个变量传给子组件,对应的子组件里面通过props来接受;

2、子传父:在父组件里面的子组件上自定义个一个方法,用来接受子组件传上来的数据,代码示例如下:

父组件代码片段:

//父组件

<condition-com
   :vessel="vessel"
   @changeLeftComponnet="changeLeftComponnet"
/>

// 父组件里面定义的子组件conditionCom,在conditionCom组件上面自定义一个方changeLeftComponnet,用来接受子组件传给父组件的数据,接受的方式如下:

changeLeftComponnet(val) {
    // 这里可以做任何的事情
    this.leftComponentName = val     
},

子组件代码片段:

<div @click='handlerChange'>
    111222333
</div>


handlerChange(){
    // 这个changeLeftComponnet就是父组件自定义的方法名,必须保持一致,后面的为传给父组件的数据
    this.$emit('changeLeftComponnet', 112233)
}

3、provide、inject:父组件给子孙组件传值

使用方法参考demo:

父组件:

<template>
  <div>
    <h2>CHINESE PORT</h2>
    <h2>这是父组件: {{ father }}</h2>
    <son-com />
  </div>
</template>

<script>
import sonCom from './sonCom.vue'
export default {
  components: { sonCom },
  provide() {
    return {
      sonDate: '子组件数据',
      childDate: '孙组件数据'
    }
  },
  data() {
    return {
      father: '父组件数据'
    }
  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>

</style>

子组件sonCom:

<template>
  <div>
    <h3>这是子组件: {{ sonDate }}</h3>
    <grand-child-com />
  </div>
</template>

<script>
import grandChildCom from './grandChildCom.vue'
export default {
  components: { grandChildCom },
  inject: ['sonDate']
}
</script>

<style>

</style>

孙组件grandChildCom:

<template>
  <div>
    <h4>这是孙组件: {{ childDate }} </h4>
  </div>
</template>

<script>
export default {
  inject: ['childDate']
}
</script>

<style>

</style>

运行之后的页面效果为:

 4.父子、兄弟、跨级:eventBus.js
这种方法通过一个空的 Vue 实例作为中央事件总线(事件中心),用它来( e m i t ) 触 发 事 件 和 ( emit)触发事件和( emit)触发事件和(on)监听事件,巧妙而轻量地实现了任何组件间的通信。

5.通信插件:PubSub.js

6.vuex
vuex 是 vue 的状态管理器,存储的数据是响应式的。只需要把共享的值放到vuex中,其他需要的组件直接获取使用即可;

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐