vue组件之间的传值

一. emit传值（全局data中的值传递）

// main.js文件定义eventHub值
 data: {
    eventHub: new Vue(),
  },
// 设置传入全局eventHub中的值，getCardAccount为自定义函数 getCardAccount中的值为 111
 this.$root.eventHub.$emit(
    "getCardAccount",
    111
  );
// 设置模块下getCardAccount方法为传入getCardAccount函数
 this.$root.eventHub.$on("getCardAccount", this.getCardAccount);
 
// 获取main.js全局值，通过getCardAccount函数获取设置的值
 getCardAccount(val) {
 // val = 111 
    this.roomCard = val;
  },

二. $parent

// routeer/index.js文件

import HelloWorld from '@/components/HelloWorld'
import storeManue from '@/components/storeManue'
// 路由定义模块关系 父级文件指向 / 二级指向 /store/index
const router = new Router({
 routes: [{
  path: '/',
   name: 'HelloWorld',
   redirect: '/store/index',
   component: HelloWorld,
   children: [{
     path: '/store/index',
     name: 'storeManue',
     component: storeManue,
   },{
     path: '/store/buyProducts',
     name: 'buyProducts',
     component: buyProducts,
   },{
     path: '/store/productCar',
     name: 'productCar',
     component: productCar,
    }],
    }
  ]
// HelloWorld.vue文件下(父级组件)
<template>
  <div class="hello">
    <div class="demo-content-block" v-resize="resize" :style="{height:bottomHeight}">
      <router-view></router-view>
    </div>
    <mu-container>
      <mu-bottom-nav :value.sync="shift" >
        <mu-bottom-nav-item value="home" title="首页" @click.native="storeManue" icon="home"></mu-bottom-nav-item>
    </mu-container>
  </div
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      shift: 'home',
      bottomHeight: '',
    }
  },
}
</script>

//   子级组件获取值或者重新设置父级值
<template>
  <div>
    storeManue
  </div>
</template>

<script>
  export default {
    data(){
      return {

      };
    },
    created(){
		// 获取父级组件的data值  
		console.log(this.$parent.shift)
		// 设置父级组件值
		this.$parent.shift = ‘111’;
    },
  }
</script>

三. props (与第二种基本相同，只是传值方式获取方式不同)

// routeer/index.js文件

import HelloWorld from '@/components/HelloWorld'
import storeManue from '@/components/storeManue'
// 路由定义模块关系 父级文件指向 / 二级指向 /store/index
const router = new Router({
 routes: [{
  path: '/',
   name: 'HelloWorld',
   redirect: '/store/index',
   component: HelloWorld,
   children: [{
     path: '/store/index',
     name: 'storeManue',
     component: storeManue,
   },{
     path: '/store/buyProducts',
     name: 'buyProducts',
     component: buyProducts,
   },{
     path: '/store/productCar',
     name: 'productCar',
     component: productCar,
    }],
    }
  ]
// HelloWorld.vue文件下(父级组件)
<template>
  <div class="hello">
    <div class="demo-content-block" v-resize="resize" :style="{height:bottomHeight}">
      <router-view :shift="shift"></router-view>
    </div>
    <mu-container>
      <mu-bottom-nav :value.sync="shift" >
        <mu-bottom-nav-item value="home" title="首页" @click.native="storeManue" icon="home"></mu-bottom-nav-item>
    </mu-container>
  </div
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      shift: 'home',
      bottomHeight: '',
    }
  },
}
</script>

//   子级组件获取值
<template>
  <div>
    storeManue
  </div>
</template>

<script>
  export default {
  	props: ['shift'],
    data(){
      return {

      };
    },
    created(){
		// 获取父级组件的data值  
		console.log(this.shift)
    },
  }
</script>

四. 独立组件之间的传值（通过文件引用使用独立文件的组件）

// 独立组件 tips.vue文件

<template>
  <div>
    <p class="warning-tip" id="warning_tip" :style="{display:show}">{{message}}</p>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        show:'none',
      }
    },
    props:['isShow','message','time'],
    watch:{
      isShow(newval){
        console.log(newval)
        if(newval){
          this.warningTip(this.time);
        }
      }
    },
    methods:{
      warningTip(time){
        this.show = 'block';
        setTimeout(()=>{
          this.show = 'none';
          // 返回函数
          this.$emit('child-say', false);
        }, time)
      }
    }
  }
</script>

<style>
  .warning-tip {
    position: absolute;
    z-index: 1000;
    top: 52%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 9px 20px 7px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    margin: 0;
  }
</style>



// 需要使用tips组件的文件
<template>
  <div>
    <tips :isShow="isShow" :message="message" :time="time" v-on:child-say="childSay"></tips>
  	<button @click="deleteNumber"></button>
  </div>
</template>

<script>
  import tips from '@/components/tips'
  export default {
    components: { tips },
    data() {
      return {
        time: '',
        message: '',
        isShow: false
      }
    },
    created() {
    },
    methods: {
      childSay(){
        this.isShow = false;
      },
      deleteNumber(){
         this.isShow = true;
         this.message = '选购数量不能小于1件';
         this.time = '2000';
      
      },
    },
  }
</script>