一、父组件向子组件传递数据(props)
第1:父组件需引入子组件
import './nav2Children.vue'
import './public/zjOne.vue'
组件引入:components: {'nav2C': nav2Children, 'zjOne': zjOne}
变量定义:content:{}, title:"",
html部分写法:
第2:子组件用props接收数据(接收时需注意变量的类型要一一对应)
props: {'data': Object, title: String},
console.log(data)/console.log(title)
二、子组件向父组件传递数据(子组件主要通过事件传递数据给父组件)
子组件部分:
<button @click="goback">子组To父组</button>
首先声明一个了方法 goback,用click事件来调用 goback
goback: function () {
this.$emit('transferTitle ', this.title)
}
在 goback中,使用了 $emit 来遍历 transferTitle 事件,并返回 this.title
其中 transferTitle是一个自定义的事件,功能类似于一个中转,this.title 将通过这个事件传递给父组件
子组件部分:
这里还可以简写成:@transferTitle=“activated”
在父组件中,声明了一个方法 activated,用 transferTitle 事件调用 activated 方法,获取到从子组件传递过来的参数 title
//接收子组件传来的值
activated: function (data) {
console.log(data);
this.name = data;
},
三、vue 路由传参 params 与 query 两种方式的区别
页面传值:router-link跳转,通过query或params
注意:以上两种写法的区别在于第一种可以用query、params,第二种只能用query,这是因为,params只能用name来引入路由,比如以下方法也可以:
this.$router.push({
name:"nav1Children",
params:{userId:'formV',code:10011}
});
页面接收值:
(1)this.$router.currentRoute.query.userId;
(2)this.$route.query.userId;
(3)this.$route.params.userId;
此处需注意:this.$router.currentRoute 等价于 this.$route
显示区别:
query:
params:
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
四、跨页面传值也用query或者localStorage,query方法同上
localStorage是window上的。所以不需要写this.localStorage,你这里的this,是指vue实例。
方案一、
存储:localStorage.data = JSON.stringify(data.body.data);
获取:JSON.parse(localStorage.data);
方案二、
存储:localStorage.setItem('data',JSON.stringify(data.body.data));
获取:JSON.parse(localStorage.getItem('data'));
五、组件与组件之间的传值还有一种方法event bus
这里来看一个简单的例子:
比如,我们这里有三个组件,main.vue、click.vue、show.vue。click和show是父组件main下的兄弟组件,而且click是通过v-for在父组件中遍历在了多个列表项中。这里要实现,click组件中触发点击事件后,由show组件将点击的是哪个dom元素console出来。
首先,我们给click组件添加点击事件
<div class="click" @click.stop.prevent="doClick($event)"></div>
首先创建出我们的eventBus,我们把它命名为bus.js
import Vue from 'vue';
export default new Vue();
这样我们就创建了一个新的vue实例。接下来我们在click组件和show组件中import它。
import Bus from 'common/js/bus.js';
接下来,我们在doClick方法中,来触发一个事件:
doClick(event) {
Bus.$emit('getTarget', event.target);
}
这里我们在click组件中每次点击,都会在bus中触发这个名为'getTarget'的事件,并将点击事件的event.target顺着事件传递出去。
接着,我们要在show组件中的created()钩子中调用bus监听这个事件,并接收参数:
Bus.$on('getTarget', target => {
console.log(target);
});
这样,在每次click组件的点击事件中,就会把event.target传递到show中,并console出来。
所以eventBus的使用还是非常便捷的,但是如果是中大型项目,通信比较复杂,还是建议大家直接使用vuex。
六、子组件向子组件传递数据
Vue 没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件。如果一定需要子对子传参,可以先从传到父组件,再传到子组件。