vue组件传参

1. 父传子：在父组件的子组件标签上绑定传输的变量，在子组件中利用props接收

// 父组件
<template>
 <div class="home">
     <Bread :list='list' />
 </div>
</template>
<script>
import Bread from '../components/Bread'
export default {
 components:{Bread},
 data(){
   return {
     list:'哈哈哈'
   }
 }
}
</script>
//子组件	接收到的数据跟data中的数据是一样的用法
<template>
 <div>
     <h2>{{list}}</h2>
 </div>
</template>
<script>
export default {
   props:['list']
}
</script>

2. 子传父：先在父组件的子组件标签上自定义一个事件调用方法

<template>
  <div class="home">
      <Bread :list='list' @arr='arr' />
  </div>
</template>
<script>
import Bread from '../components/Bread'
export default {
  components:{Bread},
  data(){
    return {
      list:'父传子'
    }
  },
  methods:{
    arr(stg){
      this.list = stg
    }
  }
}
</script>

在子组件中通过$emit来传输数据 ，第一个参数为自定义事件的名，第二个数据为要传输的数据

<template>
  <div>
      <h2 @click='arr'>{{list}}</h2>
  </div>
</template>
<script>
export default {
    props:['list'],
    data(){
      return {
        arrs:'子传父'
      }
    },
    methods:{
      arr(){
        this.$emit('arr',this.arrs)
      }
    }
}
</script>

3. vuex：先在store中mutations上定义方法，然后在传输方使用store.commit()调用方法传输数据，第一个参数调用方法名，第二个参数为传输的数据

<template>
  <div class="home">
      <Bread @click='add' />
  </div>
</template>
<script>
import Bread from '../components/Bread'
export default {
  components:{Bread},
  data(){
    return {
      list:'vuex'
    }
  },
  methods:{
    add(){
      this.$emit.commit('getData',this.list)
    }
  }
}
</script>

在接收方用$store.state进行接收 数据可以直接时候

 <h2>{{$store.state.add}}</h2>

4. eventBus(时间总线)：在src中新建一个Bus.js的文件，然后导出一个空的vue实例

import Vue from 'vue';  
export default new Vue();

在传输数据的一方引入Bus.js 然后通过Bus.emit (“事件名”,“参数”)来派发事件，数据是以emit()的参数形式来传递

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    add:''
  },
  mutations: {
    getData(state,data){
      state.add = data
    }
  }
})

<template>
  <div>
    <button @click="doClick">点击兄弟传值</button>
  </div>
</template>
<script>
import Bus from "../bus.js";
export default {
  data() {
    return {
      actor: "Hollow",
    };
  },
  methods: {
    doClick() {
      Bus.$emit("getValue", this.actor);
    },
  },
};
</script>

在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

<template>
  <div>
    {{ actor }}
  </div>
</template>
<script>
import Bus from "../bus.js";
export default {
  data() {
    return {
      actor: "",
    };
  },
  methods: {},
  created() {
      Bus.$on("getValue",(str)=>{
        this.actor=str
      })
  },
};
</script>

5. 本地存储(localStorage,sessionStorage)
   两个组件A和B，在A组件设置要缓存的orderData

let orderData = { order: 123, price: 111 };
localStorage.setItem('shop',JSON.stringify(orderData))

B组件就可以获取到A组件中设置的缓存了

let shopcart=JSON.parse(localStorage.getItem('shop'))
console.log(shopcart);

6. 先在src下边创建一个Global.js文件，里面定义一些变量初始状态，

exports.install = function (Vue) {Vue.prototype.token='123123' }

在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。

import Global from "./Global"
Vue.use(Global)

挂载后，直接用就可以了，代码如下：

<template>
  <div>
    {{ token }}
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>

7. 使用router-link进行路由导航，传递参数

<router-link to="/son/123"> <button>点我</button></router-link>

使用this.$route.params.num来接收路由参数

<template>
  <div>
    {{num}}>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num:0,
    };
  },
  created() {
    this.num=this.$route.params.num
  },
};
</script>

直接调用$router.push 实现参数的跳转

<template>
  <div>
    <li v-for="item in 3" :key="item" @click="toSon(item)">
      {{ item }}
    </li>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    toSon(id) {
      this.$router.push({
        path: `/son/${id}`,
      });
    },
  },
};
</script>

{{this.$route.params.id}}

通过query来传递参数

<template>
  <div>
    <button @click="toSon">1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    toSon() {
      this.$router.push({
        path: "/son",
        params: {
          id: 1,
        },
      });
    },
  },
};
</script>

{{this.$route.query.id}}

8. $parent和Children

let Son = {
        template:`<div>
            {{ name }} {{ position }}<button @click="ChangeName">Change Parent Name</button>
        </div>`,
        data(){
            return{
                name:'Son',
                position:'son'
            }
        },
        methods:{
            ChangeName(){
                this.$parent.name = 'Have Change';//设置父级的name为xxx
            }
        }
    };
    let App = {
        template: `<div id="app">
        {{ name }}
        {{ position }}
        <button @click="send">Pass Value</button>
        <hr><Son/>
        </div>`,
        data(){
            return{
                name:"App",
                age:21,
                position:'parent',
                message:'From App'
            }
        },
        components:{
            Son
        },
        methods:{
            send(){
                this.$children[0].name = "change";//设置它的第一个子元素，即子组件的name为 xxx
            }
        }
    };

9. $refs
   父组件

<v-header ref="headerTY"></v-header>
 <button @click="getData">父组件获取子组件的值和方法</button>

<script>
import Header from './header';
export default {
  data(){
    return{
        msg:'这是一个首页组件',
        name:'首页',
        dataone:'首页第一个数据',
        title:'111'
    }
  },
  components:{
      'v-header':Header
  },
  methods:{
      getData(){
        // console.log(this.$refs.headerTY.msg)
        this.$refs.headerTY.run();
      },
      Yun(){
        alert('父组件')
      }
  }
 
 
}
</script>

子组件

<template>
  <div id="app1">
    {{msg}}
    <button @click="getParent()">获取付父组件的值和方法</button>
   <hr>
  </div>
</template>

<script>
export default {
  data(){
    return{
        msg:'这是一个头部组件',
        didi:''
    }
  },
  methods:{
    run(){
      alert(111)
    },
    getParent(){
      alert(this.$parent.name);
    }
  }
}
</script>