vue学习一 组件之间的数据传递

1.还在vue项目中慢慢爬坑，在vue项目中传递数据，其中有父组件向子组件，子组件向父组件，以及子组件之间的传递。

2.其中子组件向父组件传递数据，即在子组件vue文件中定义触发方法，将值通过$emit的方式写function
a.子组件navbar.vue

点击tabbar_item时，触发clickFun方法，此处是要传递index

<div class="weui-tabbar__item"
   v-for="(tabbarName,index) in tabbarNames" v-on:click="clickFun(tabbarName,index) ">         
div>

方法内容：
使用使用了 $emit 来遍历 transferNav 事件，并返回index

methods:{
     clickFun(tabbarName,index){      
         this.$emit('transferNav',index);
         console.log(index);
     },
 }

b.父组件index.vue

<navbar @transferNav="getNav">navbar>

通过方法获取到子组件的传值

 getNav(msg){
     this.userNav = msg;
 },

父组件存放该数据的位置

<div>{{userNav}}div>

3 . 父组件向子组件传递
在 Vue 中，可以使用 props 向子组件传递数据。
a.父组件 index.vue

:Indexmsg="Indexmsg">

在data中定义Indexmsg这个数据变量

        data(){
            return{
                Indexmsg:'data',
            }
        },

b.子组件 selfcenter.vue
子组件中准备好容器存放传递过来的数据

<div>{{Indexmsg}}div>

Indexmsg 是在 data 中定义的变量。

如果需要从父组件获取 logo 的值，就需要使用

props:['Indexmsg']

此时在props中定义后，就不用在data中声明了

4.子组件同级之间的传递，暂时没有有效的方法，可以学习使用vuex，完美解决子组件传递问题
建议组件之间含有数据传递的写在同一个组件内

效果诉求是：

在子组件1的navbar导航栏内点击title切换界面，当点击的index为0时，即第一个item，此时共同的父组件内出现子组件2；点击子组件1的其他title，则子组件2消失

a.子组件1 navbar.vue

导航栏点击效果触发，用于保存当前的index

    <div class="weui-tabbar__item"
        v-for="(tabbarName,index) in tabbarNames" v-on:click="clickFun(tabbarName,index) ">
   div>

通过clickFun方法将当前的index值通过emit传递，在父组件会循环遍历transferNav方法来找到传递的index值

    methods:{
        clickFun(tabbarName,index){
            this.$emit('transferNav',index);
        },
    }

此处还需要注意的是，当选中导航栏的title时，该状态应丢到sessionStorge里进行存取，该处并不是跳转的router新界面，为点击不同的title进行界面的消失或显示

此处的传递值，也应从storge取出后进行跨组件传递，否则刷新后，该值即被清空
设置的objStr是点击导航栏的index缓存数据

    created(){
        var a = sessionStorage.getItem('objStr');
            if (a) {
                this.$emit('transferNav',a);
            }
    },

b.父组件 index.vue

父组件中添加了navbar.vue和selfcenter.vue

   <navbar @transferNav="getNav">navbar>


   <selfcenter :Indexmsg="Indexmsg">selfcenter>

    components:{
         'navbar':navbar,
         'selfcenter':selfcenter,
     },

@transferNav为通过该方法取出子组件的数据

selfcenter即是通过Indexmsg来进行赋值到子组件中

首先需要在data中进行声明该数据对象

    Indexmsg:null,

定义该方法，将子组件1中的数据取出，赋值给子组件2中的Indexmsg

    //从navbar.vue中获取到点击导航栏到index信息
    getNav(msg){
        this.Indexmsg = msg;
    },

c.子组件2 selfcenter.vue

子组件2的div通过判断数据Indexmsg是否为index为0来确定显隐性关系

<div class="body-content" v-bind:class="{'display':Indexmsg==0}">div>

定义了Indexmsg后需要在data中进行声明

此处用了props之后就不用在data中声明该数据变量了

props:['Indexmsg']