vue组件传值

一.父子传参

• 在父组件的子组件标签上绑定一个自定义属性，挂载它需要传输的变量

<template>
  <div>
      <h1>父组件</h1>
      <Son :title="arr"></Son>
  </div>
</template>

<script>
import Son from "./Son"
export default {
    components:{
        Son,
    },
  data() {
    return {
        arr:[1,2,3],
    };
  },
};
</script>

<style scoped>
</style>

• 在子组件中通过props来接收(它可以是数组也可以是对象)，可以传递多个属性。

<template>
  <div>
      <h1>子组件</h1>
      {{title}}
  </div>
</template>

<script>
export default {
    props:['title'],
  data() {
    return {};
  },
};
</script>

<style scoped>
</style>

二.子传父

• 在父组件的子组件标签上自定义一个事件，然后调用需要的方法。

<template>
  <div>
    <h1>父组件</h1>
    {{ love }}
    <Son @son="myname"></Son>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  components: {
    Son,
  },
  data() {
    return {
    //   arr: [1, 2, 3],
      love: "",
    };
  },
  methods: {
    myname(str) {
      this.love = str;
    },
  },
};
</script>

• 在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

<template>
  <div>
      <h1>子组件</h1>
      <!-- {{title}} -->
      <button @click="info">点击传值(子传父)</button>
  </div>
</template>

<script>
export default {
    // props:['title'],
  data() {
    return {
        love:"因为爱情",
    };
  },
  methods:{
      info(){
          this.$emit("son",this.love)
      }
  }
};
</script>

<style scoped>
</style>

三.兄弟组件(中央事件总线)

• 在src中新建一个Bus.js的文件，然后导出一个空的vue实例

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

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

<template>
  <div>
    <button @click="doClick">点击传值(兄弟传值)</button>
  </div>
</template>

<script>
import Bus from "../bus.js";
export default {
  data() {
    return {
      actor: "你好吗？",
    };
  },
  methods: {
    doClick() {
      Bus.$emit("getValue", this.actor);
    },
  },
};
</script>

<style scoped>
</style>

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

<template>
  <div>
    {{ actor }}
    <Son></Son>
  </div>
</template>

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

<style scoped>
</style>

四.本地存储(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);

• sessionStorage和localStorage组件传值一样。

五.VUEX进行传值
vuex有五大核心

1. state 所有的数据都存储在state中
2. mutations 可以直接操作state中的数据
3. actions 只能调用mutations的方法
4. geeters 类似计算属性，实现对state中的数据做一些逻辑的操作
5. modules 将仓库分模块存储

• A组件

<template>
  <div>
    <input type="text" :value="msg" @change="changeMsg" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg:''
    };
  },
  methods: {
    changeMsg(e){
      this.$store.commit('setMsg',e.target.value);
      this.$router.push('/son')
    }
  },
  created() {
    this.msg=this.$store.state.user_name
  },
};
</script>

<style scoped>
</style>

• B组件

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg:""
    };
  },
  methods: {
   
  },
  created() {
    this.msg =this.$store.getters.getMsg
    console.log(msg);
    
  },
  computed:{
   
  }
};
</script>

<style scoped>
</style>

• index.js(store)

import Vue from 'vue'
import Vuex, { Store } from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user_name: ""
  },
  mutations: {
    setMsg(state, payload) {
      state.user_name = payload
    }
  },
  actions: {
    setMsg(payload) {
      Store.commit("setMsg", payload)
    }
  },
  modules: {
  },
  getters: {
    getMsg(state) {
      return state.user_name
    }
  }
})

六.全局变量

• 先在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 {};
  },
  methods: {},
  created() {},
};
</script>

<style scoped>
</style>

七.路由传值

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

• 父组件中：使用 （router-link） 标签进行导航
  son是子页面路由路径，123是需要传递的参数

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

• 子组件中：使用this.$route.params.num来接收路由参数

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

<style scoped>
</style>

直接调用$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}`,
      });
    },
  },
  created() {},
};
</script>

<style scoped>
</style>

• 子组件

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

通过路由属性中的name来确定匹配的路由，通过params来传递参数

• 父组件

<template>
  <div>
    <button @click="toSon">1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toSon() {
      this.$router.push({
        name: "sonView",
        params: {
          id: 1,
        },
      });
    },
  },
  created() {},
};
</script>

<style scoped>
</style>

• 子组件

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

• 路由配置文件中

  {
    path: '/son',
    name: 'sonView',
    component: () => import('../views/Son.vue')
  }

通过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,
        },
      });
    },
  },
  created() {},
};
</script>

<style scoped>
</style>

• 子组件

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

• 路由配置文件中

{
    path: '/son',
    name: 'son',
    component: () => import('../views/Son.vue')
  }