vue 全网最全传参方式1.vue this.$forceUpdate() 使用v-for循环，动态绑定失效解决方法。

一父传子

1.父组件

在父元素调用子元素的自定义标签上面设置传参变量例子如下:

 <player :PlayMusic="PlayMusic"></player>

2.子组件

在export default 下设置一个props例子如下:

   props: ["PlayMusic"]

然后可以在watch里面监听该变量，也可以在页面中直接显示，也可在在函数里面用this访问

二子传父

1.子组件

在子组件要传参的地方设置如下:

 this.$emit("设置监听事件", 要传参的变量或者参数);

2.父组件

在父组件调用子组件的自定义标签上面设置如下:

 <heade @子元素设置的监听事件="submit"></heade>

Submit是一个自定义回调函数例子如下:

 submit(data) {
    console.log(data);
}
data为子组件传过来的参数

三兄弟传参

在src新建一个js文件内容如下:

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

在main.js中引用该js，内容如下:

import self from "../src/self.js"
Vue.prototype.self = self

在传参组件设置

 this.self.$emit("设置一个监听事件", 要传参数的变量);

接收参数组件

 this.self.$on("监听事件后运行函数", val => {
         val为接收参数
});

四点击事件router传参

传参页面例子如下:

  this.$router.push({ path: "跳转页面路由", query: { id: id } });

跳转页面例子如下:

this.$route.query.id;

五 vue传参

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {        //存储状态（变量）
    //公共变量
    count:0
  },
  mutations: {     //自定义事件类似。
       //公共事件函数
       //函数第一个参数默认为state,参数n第二个函数是主键传过来的实参
         show(state, n) {
            return (state.count=n)
}   
  },
  actions: {        //异步操作。在组件中使用是$store.dispath('')
    add({ commit }, n){ //函数第一个参数为默认参数，第二个参数是传过来的实参
        return commit('show', n)
    }
  }
})

组件中

 $store.state.变量名     在methods里面要加this

添加一个点击事件，在methods点击事件函数

 //Mutations 点击事件处理函数
Click(n){
  this.$store.commit(‘show’,n);}

//actions异步处理函数
Reduce(n){
  this.$store.dispatch('add',n)}

六 vue小技巧

1.vue this.$forceUpdate() 使用v-for循环，动态绑定失效解决方法。

问题原因：在v-for循环中，我们在函数中改变了item中的值，在console.log()中查看是修改成功了，但在页面中没有及时刷新改变后的值。
解决方法：使用vue自带的 this.$forceUpdate() 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

2.vue解决刷新页面vuex数据

在App.vue中，created初始化生命周期中写入以下方法
  created() {
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("messageStore", JSON.stringify(this.$store.state));
    });
    // 在页面加载时读取sessionStorage里的状态信息
    this.$store.replaceState(
      Object.assign(
        this.$store.state,
        JSON.parse(sessionStorage.getItem("messageStore"))
      )
    );
  }
replaceState这个方法呢，查了api，就是替换 store 的根状态，然后通过对象赋值assign将localStorage进行赋值
beforeunload这个方法是在页面刷新时触发的，将store中的信息存sessionStorage
这样就通过sessionStorage来避免vuex刷新数据消失的问题了

3.vue中监听路由参数变化的方法

在vue项目中，假使我们在同一个路由下，只是改变路由后面的参数值，如果不监听路由参数值的变化，页面无数据刷新，需手动刷新浏览器，这样做就不是我们的预期效果。
watch: {
      $route(){
        调用执行的函数
      },
   },

vue 全网最全传参方式

一 父传子