一、父子之间主键传值：（主要是在父主件里的子主件传递参数，然后再子主件里用props接收）
例如Father.vue
梁鹏翱<template>
<div class="father">
<Son :value="123456" title="hello" :inputVal="val"
@sendData="testAction">
Son>
<button @click="testAction()">按钮button>
div>
template>
<script>
import Son from './Son.vue'
export default {
components: {
Son
},
data(){
return {
message: 'hello vue',
val: '12345'
}
},
methods: {
sendAction(){
this.val = this.$refs.in.value;
}
}
}
script> 例如Son.vue
export default {
//接收组件标签上的属性
//外部属性,只能访问，不能修改
// 单向数据流：保证数据是自顶向下的
// props: ['value', 'title']
props: {
value: Number,
title: String,
inputVal: String
},
//内部属性
data(){
return {
name: this.title
}
},
methods: {
modify(){
this.name = 'world';
},
sendAction(){
let value = this.$refs.in.value;
//调用click事件
// 触发组件标签上的自定义事件
// 参数1：事件名字
// 参数2：传递的值sendData
this.$emit('sendData', value, 1,2,3,4,5);
}
}第二、非父子组件间的父子传值
import Vue from 'vue'
import app from './app.vue'
import center from './center'
Vue.prototype.$center = center;
const vm = new Vue({
el: '#app',
render: h=>h(app)
})
center.js文件：
export default {
$on: function(eventName, callback){
// 根据事件名字获得了回调
// 保存所有的回调函数
},
$emit: function(eventName, ...rest){
// 根据事件名字，调用对应的回调函数
// 调出来之前保存的相同事件名字的回调函数，一个一个执行。
},
$off: function(){
}
}methods: {
//发送事件：（触发事件发送参数）
sendAction(){
console.log(this.value);
//触发事件
this.$center.$emit('send-data', this.value);
}
}
bb.vue文件：（接收参数）
created() {
// 监听事件
this.$center.$on('send-data', this.listener);
},
beforeDestroy(){
console.log('组件销毁前');
//移除监听
this.$center.$off('send-data', this.listener);
}三.页面跳转通过路由带参数传递数据
// 1.页面中的代码
this.$router.push({
name: 'generalAdminOrderFlowAdd',
params: {
type: 'add',
templateType: this.orderTemplateType
}
})
或
this.$router.push({
name: 'routePage',
query/params: {
routeParams: params
}
})需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题。这样使用起来很方便，但url会变得很长，而且如果不是使用路由跳转的界面无法使用。
{
path: ':type/:templateType',
name: 'generalAdminOrderFlowAdd',
component: require('@/components/generalAdmin/order/orderFlow')
}
0
联系我
0条评论