vue 组件传参几种方式

vue组件的五种传值方法(父子\兄弟\跨组件)

一、props/$emit父子组件传值

父传子 (自定义属性 props)

//  父组件代码
<Son :name="31231"/>
// 子组件代码
<div>{{ name }}</div>
props: {
    name: {
      type: String,
      default: "hahahaha",
    },
}

子传父（自定义this.$emit）

// 子组件代码
<button @click="handleClick">子组件按钮</button>
  methods: {
    handleClick() {
      this.$emit("handleClick", "下班快跑，吃饭要饱");
    },
  },
// 父组件代码
<Son  @handleClick="handleClick" />
  methods: {
    handleClick(value) {
      this.text = value;
    },
  },

二、ref与parent/children父子组件传值

父传子

// 父组件
<button @click="handlebtn1">父按钮</button>
<Son ref="sonRef" />
 methods: {
    handlebtn1() {
      // 可以拿到子组件所有的信息
      console.log(this.$refs.sonRef)
      this.$refs.sonRef.handlebtn("父信息");
    },
},
// 子组件
<div>我是子组件---{{ name }}</div>
 methods: {
    handlebtn(value) {
      console.log(value);
      this.name = value;
    },
},

子传父（如果子组件是公共组件，需判断父组件是否具有该方法）

// 父组件
handlebtn1(value) {
    this.text = value;
},
// 子组件
<button @click="handlebtn">子组件按钮</button>
 handlebtn() {
       // this.$parent  拿到父组件所有的信息 跟ref类似
      this.$parent.handlebtn1("母猪快跑");
},

三、兄弟之间传参

兄弟组件之间的数据传递，通过eventBus来做中间的桥梁，传输方通过中间组件调用 emit 传数据，接收方通过on 接受数据，两者之间的自定义属性名保持一致。(vue3 已经移除这种方式)

// vue2
// 传输方组件调用方式
import Bus from '@/EventBus.js'
Bus.$emit('pass-value', this.say);

// 接收方接受参数
import Bus from '@/EventBus.js'

created() {
  Bus.$on('pass-value', val => {
     this.sibilingValue = val;
  })
}

// vue3  (使用第三方库mitt)
import mitt from 'mitt'
app.config.globalProperties.$mitt = mitt();
// 发送消息
import {getCurrentInstance} from 'vue';
const { appContext } = getCurrentInstance()
appContext.config.globalProperties.$mitt.emit('moneyEvent', ’31231‘)；
// 接受消息
import {getCurrentInstance} from 'vue';
appContext.config.globalProperties.$mitt.on('moneyEvent', (res) => {
        amount.value = res;
})

四 attrs/$listeners隔代组件传值（爷孙组件参数互传） （vue3 不支持此方法）

爷传孙（$attrs）

// 爷爷
<Dad :msg="'我是爷爷'" />
// 父亲
<Son v-bind="$attrs" />
// 孙子
<div>我是孙子组件---{{ msg }}</div>
props: {
    msg: {
      type: String,
    },
},

孙传爷（$listeners）

爷爷
<button @click="setVal">父按钮</button>
methods: {
    setVal(val) {
      console.log(val);
    },
}
爸爸
<Son v-on="$listeners"/>
孙子
<div @click="toVal">我是孙子组件</div>
methods: {
    toVal() {
      this.$emit("setVal", "孙子信息");
    },
},

五、通过Vuex数据共享

// 注册代码
const store = new Vue.Store({
  state:{
    count: 100
  },
  mutations: {
    addCount(state, val = 1) {
      state.count += val;
    }，
    subCount(state, val = 1) {
      state.count -= val;
    }
  }
})

// 组件调用
this.$store.commit('addCount');  // 加 1
this.$store.commit('subCount');  // 减 1

六.依赖注入provide/Inject（子组件都可以拿到）

父组件
  provide: {
    sonmsg: "哈哈哈哈哈哈",
  },

下级组件
<div @click="toVal">我是孙子组件{{ sonmsg }}</div>

inject: ["sonmsg"]