脚本宝典收集整理的这篇文章主要介绍了vue程序中组件间的传值方式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vue程序在组件中进行传值有多种方式，这里记录我在项目中使用到的三种：
    1. 父组件向子组件传值
    2. 子组件向父组件传值
    3. 通过路由传参

• 父组件通过props向子组件传值

  在子组件script中声明所要接收的参数名称以及类型

  props: {
      deliverValue: String
  }

  在父组件template中使用子组件并向子组件传值

  <ｖ-child :deliverValue="s"></v-child>

  完成上面的步骤后可直接在子组件中使用传递的参数值（方法与访问data中的值一样）

• 子组件通过事件向父组件传参

  在子组件中：

  <button @click="$emit('change-value', 1)">change value button</button>
  // 或在脚本中定义对应的方法进行时间触发
  // <button @click="change">change value button</button>
  // ...
  // ...
  // methods: {
  //     change () {
  //         this.$emit('change-value', 1)
  //     }
  // }

   vm.$emit( eventName, […args] )
   $emit是vue实例的方法，用于触发当前实例上的事件。第一个参数表示触发的方法名，第二个为附加的参数。
   可根据需要决定是否传参。

  在父组件中：

  <v-child @change-value:"change"><v-child>
  ...
  methods: {
      change (val) {
         console.log(val) // 1 
      }
  }

• 通过路由进行传值

  在需要路由跳转的地方：

   <router-link :to="{name: 'onlinemap', params: { index: 'dom' }}"><button>跳转到在线地图</button></router-link >

       1.其中v-bind:to需要传入的数据为键值对对象，因此在定义此路由时，需添加name属性
       （这里onlinemap就是在线地图页面路由的name属性值)
       2.使用路由传参的其他方法：https://router.vuejs.org/zh/guide/essentials/passing-props.html
       在目标页面:
       ```
       var param = this.$route.params.index 
       ```
       获取参数
  
  

脚本宝典总结

以上是脚本宝典为你收集整理的vue程序中组件间的传值方式全部内容，希望文章能够帮你解决vue程序中组件间的传值方式所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。