一.基本传值方法 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传值
首先使用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>
