Vue的七種傳值方式

鵬多多發表於2021-02-08

1,父傳子


子元件中定義props欄位,型別為陣列(如果需要限制欄位值型別,也可以定義為物件的形式)。如下圖的例子,父元件掛載子元件HelloWorld,在元件標籤上給title賦值,子元件HelloWorld定義props,裡面有一個值是title,這樣子元件就可以使用父元件的值了。

父元件

<template>
  <div>
    <HelloWorld :title="msg" />
  </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "Home",
  data() {
    return {
      msg: "搜尋音樂",
    };
  },
  components: {
    HelloWorld,
  },
};
</script>

子元件

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
  </div>
</template>

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

2,子傳父


子傳父,需要在子元件中觸發一個事件,在事件中,呼叫$emit('父元件的方法名', '傳遞的值'),然後在父元件中,通過自定義事件接收傳遞過來的值。

子元件

<template>
  <div class="hello">
    <h1 @click="add">{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["title"],
  data() {
    return {
      age:18
    };
  },
  methods: {
    add(){
      this.$emit("childEvent", this.age);
    }
  },
};
</script>

父元件

<template>
  <div>
    <HelloWorld @childEvent="parentEvent" :title="msg" />
  </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "Home",
  data() {
    return {
      msg: "搜尋音樂",
    };
  },

  methods: {
    parentEvent(e) {
      console.log(e);
    },
  },
  components: {
    HelloWorld,
  },
};
</script>

3,兄弟元件傳值


1,先新建一個bus.js檔案,在bus.jsnew一個Vue例項,充當傳輸資料的中間層。

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

2,在元件A中引入bus.js,通過bus.$emit('事件名','引數')傳遞引數

<template>
  <div class="hello">
    <h1 @click="add">{{ title }}</h1>
  </div>
</template>

<script>
import bus from "../publicFn/bus.js";

export default {
  name: "HelloWorld",
  props: ["title"],
  data() {
    return {
      age:18
    };
  },
  methods: {
    add(){
      bus.$emit("childEvent", this.age);
    }
  },
};
</script>

3,在B元件mounted週期中使用$on('事件名', function(){})接收

<template>
  <div id='swiper'>
    <button>我是按鈕</button>
  </div>
</template>

<script>

import bus from "../publicFn/bus.js";

export default {
  name:'Swiper',
  data (){
    return {

    }
  },
  mounted(){
    bus.$on("childEvent", (e) => {
      console.log(e)
    })
  }
}
</script>

4,父元件使用子元件的資料和方法


1,在子元件標籤上寫上ref屬性

2,父元件通過this.$refs.id.方法名或者this.$refs.id.屬性名的方式可以訪問子元件。

父元件

<template>
  <div>
    <HelloWorld :title="msg" ref="hello" />
    <button @click="parentEvent">我是父親</button>
  </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "Home",
  data() {
    return {
      msg: "搜尋音樂",
    };
  },

  methods: {
    parentEvent() {
      this.$refs.hello.add();
      console.log(this.$refs.hello.age);
    },
  },
  components: {
    HelloWorld
  },
};
</script>

子元件

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["title"],
  data() {
    return {
      age:18
    };
  },
  methods: {
    add(){
      console.log("我是子元件");
    }
  },
};
</script>

5,子元件使用父元件的資料和方法


在子元件中,可以使用$parent訪問其上級父元件的資料和方法,如果是多重巢狀,也可以使用多層$parent

父元件

<template>
  <div>
    <HelloWorld :title="msg" ref="hello" />
  </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "Home",
  data() {
    return {
      msg: "搜尋音樂",
    };
  },

  methods: {
    parentEvent() {
      console.log("我是父元件的方法");
    },
  },
  components: {
    HelloWorld
  },
};
</script>

子元件

<template>
  <div class="hello">
    <h1 @click="add">{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["title"],
  data() {
    return {
      age:18
    };
  },
  methods: {
    add(){
      console.log(this.$parent.msg)
      this.$parent.parentEvent();
    }
  },
};
</script>

6,Vuex傳值


Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。一般小專案不需要用到。

6.1,定義store

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    school: "清華大學",
    a:"nice"
  },
  getters: {
    returnVal(state) {
      return state.school + state.a;
    },
  },
  mutations: {
    changeSchool(state, val) {
      state.school = val;
      console.log('修改成功');
    },
  },
  actions: {},
  modules: {}
});

6.2,掛載

import Vue from 'vue';
import App from './App.vue';
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import publicFn from "./publicFn/publicFn";

Vue.config.productionTip = false


const url = process.env.VUE_APP_URL;
Vue.prototype.$url = url;
Vue.prototype.$publicFn = publicFn;

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

6.3,使用

<template>
  <div class="hello">
    <h1 @click="add">{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["title"],
  data() {
    return {
      age:18
    };
  },
  methods: {
    add(){
      console.log(this.$store.state.school);//獲取值
      //this.$store.commit('changeSchool', '北京大學');//修改值
      // console.log(this.$store.getters.returnVal)//獲取過濾後的值
    }
  },
};
</script>

7,路由傳值


7.1 通過query傳值

注意:該方式重新整理頁面引數不丟失,並且會在位址列後將引數顯露,http://localhost:9000/#/conter?id=10086&name=%E9%B9%8F%E5%A4%9A%E5%A4%9A

頁面A

<template>
  <div>
    <HelloWorld :title="msg" ref="hello" />
    <button @click="parentEvent">跳轉</button>
  </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "Home",
  data() {
    return {
      msg: "搜尋音樂",
    };
  },

  methods: {
    parentEvent() {
      this.$router.push({
        path:"/conter",
        name:'conter',
        query:{
          id:10086,
          name:"鵬多多"
        }
      })
    },
  },
  components: {
    HelloWorld
  },
};
</script>

頁面B

<template>
  <div id='conter'>

  </div>
</template>

<script>

export default {
  name:'conter',
  data (){
    return {

    }
  },
  created (){
    console.log(this.$route.query.id, this.$route.query.name);
  },
}
</script>

7.2 通過params傳值

注意:該方式重新整理頁面引數會丟失,可以接收後存在sessionStorage

A頁面

<template>
  <div>
    <HelloWorld :title="msg" ref="hello" />
    <button @click="parentEvent">跳轉</button>
  </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "Home",
  data() {
    return {
      msg: "搜尋音樂",
    };
  },

  methods: {
    parentEvent() {
      this.$router.push({
        path:"/conter",
        name:"conter",
        params:{
          id:10086,
          name:"鵬多多"
        }
      })
    },
  },
  components: {
    HelloWorld
  },
};
</script>

B頁面

<template>
  <div id='conter'>

  </div>
</template>

<script>

export default {
  name:'conter',
  data (){
    return {

    }
  },
  created (){
    console.log(this.$route.params.id, this.$route.params.name);
  },
}
</script>

如果看了覺得有幫助的,我是@鵬多多,歡迎 點贊 關注 評論;
END

面向百度程式設計

往期文章

個人主頁

相關文章