Vue - 组件传值

一.基本传值方法 props/$emit

首先,我们从组件开始,导入子组件(进行注册).

import recruitSwiper from "@/components/recruit/recruit-swiper.vue"
export default {
    components: {
        recruitItem
    },
    data() {
        return {}
    }
}

将注册好的子组件应用至父组件,通过属性绑定 :info="xxx",进行 父>子 值传递

<recruitItem :info="xxx"></recruitItem>

到子组件里面,用 props 接收

export default {
    props: {
        Info: {
            type: Array
        }
    }
}
//接下来进行遍历即可
<block v-for="(info,index) in Info" :key="index"></block>

子组件向父组件传值,要运用 $emit 进行发射

export default {
    props: {
        Info: {
            type: Array
        }
    },
    methods: {
        sendTask(e) {
            this.$emit("sendTask", e) // (方法名,参数)
        }
    }
}

接收之前定义的方法名 (sendTask)

<recruit-item :info="xxx" @sendTask="sendTask"></recruit-item>
//这里定义方法
methods: {
    sendTask(e) {
      console.log(e)
    }
}

这就是基本的父子组件传值了.

---

二.vuex传值

以下例子来源于vuex官方

首先使用npm进行安装

npm i vuex -g
npm i vuex -S

静态目录src下新建一个sotre/index.js这就是你的仓库了

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        url: "xxx"
    },
    getters: {},
    mutations: {},
    modules: {}
})
export default store;

入口文件mian.js进行全局注册,现在就绑在vue原型上了

import store from './store'
    Vue.prototype.$store = store;//后面可以直接使用 this.$store
};

改变url的值,直接改this.$store.state.url="new",可以变化.但根据官方说法,最好使用commit进行值的变更.

// store/index.js
const store = new Vuex.Store({
    state: {
        url: "xxx"
    },
    mutations: {
        setUrl(state,value) {
            state.url = value // 变更
    }
})
export default store;


//sub.vue
this.$store.state.url //值的获取
this.$store.commit("setUrl","newUrl") //值的更改

三.在Vue的属性绑定:bind中,绑定的类型不仅仅是数组/对象等.也可以是函数,例如一下例子;

下述方法主要运用过程,父组件中传递给子组件函数方法,子组件调用.

// 父组件
<template>
  <div :useFunction="usedFunction"></div>
</template>

<script>
  data(){
    return{
      name:'xixi'
    }
  },
  methods(){
    useFunction(request){
      this.name = request;
    }
  }
</script>

// 子组件
<template>
  <div @click="useModule"></div>
</template>

<script>
  props:{    
    usedFunction:{
      type:Function
    }
  },
  methods(){
    useModule(){
      this.usedFunction('test')
    }
  }
</script>