vue程序中组件间的传值方式

2024年3月12日 155次阅读 来源: Fbig 
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 
     ```
     获取参数
    原文作者：Fbig
    原文地址: https://segmentfault.com/a/1190000017155239
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞