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中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
Vue和React组件之间的传值方式
在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式组件的传值场景无外乎以下几种: 父子之间兄弟之间多层级之间(孙子祖父或者更多) 任意组件之间父子之间 ...
vue组件间的传值方式及方法调用汇总
1.传值 a.父组件传子组件方法一: 父页面: <myReportContent v-if="contentState==1" :paramsProps='paramsPr ...
vue组件间通信六种方式
vue组件间通信六种方式组件之间的传值通信组件之间的通讯分为三种:父传子.子传父.兄弟之间的通讯: props/$emit 父传子:主要是通过props来实现的具体实现:父组件通过import引 ...
vue组件间通信六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
初识 Vue（18）---（非父子组件间的传值）
非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分下图这种情况的组件间传值(父子组件间传值) 方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件 ...
微信小程序四种父子相互传值方式
微信小程序四种父子相互传值方式 1. 绑定自定义属性(父传子),触发自定义方法 (子传父) 原生微信小程序+uni-app都可以实现父组件: <template><view cla ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...

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

vue程序中组件间的传值方式相关推荐

最新文章

热门文章