Vue 组件传参总结

Vue 组件传参的背景

vue的特点之一是组件化开发，那么问题来了，组件中的数据和方法都是独立的，我们如何进行组件之间的交互呢。这个时候就要用到组件传参了

传参的方式

1. 父子组件
2. 兄弟组件
3. 隔代组件

props 父到子

 <div>
    <h1>父组件</h1>
    <son1 v-bind:info="info" v-bind:sex.sync="sex" />
    <h2>{{ info.name }}</h2>
    <h2>{{sex}}</h2>
  </div>
</template>

<script>
import son1 from "./son1.vue";
export default {
  components: {
    son1,
  },
  data() {
    return {
      info: {
        name: "小天",
        age: 24,
      },
      sex:"男"
    };
  },

 props 结合 .sync 子到父 

   使用.sync的时候

子到父传参，使用 this.$emit("update:字段名",数据) 即可实现子到父的传参

父

 <son1 v-bind:info="info" v-bind:sex.sync="sex" />

 changeSex() {
      //   this.sex = "女";
      this.$emit("update:sex", "女");
    },

 props  子到父  emit 和@自定义事件传参

父

    <son1 v-bind:info="info"  @sendInfo="getInfo"  />

子

props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

 changeSex() {
      //   this.sex = "女";
      //   this.$emit("update:sex", "女")
      this.$emit("sendInfo", "666");
    },

兄弟组件传参

定义全局js文件

import Vue from "vue";

export default new Vue()

兄弟组件a

import bus from "./bus.js";

 bus.$emit("send", 666);

兄弟组件 b

 import bus from "./bus.js";
          
    bus.$on("send", (e) => {
      console.log(e);
    });

ref 调用子组件实例传参

父组件

 <son1 ref="son1"  />

 this.$refs.son1.updateDate("111");

子组件

 updateDate(val) {
      this.msg = val;
    },

ref 调用子组件方法修改数据

父组件

  this.$refs.son1.updateInfo()

子组件

   updateInfo(){
      this.msg = "566666"
    }

$refs['子组件'].children 

当一个子组件在父组件里循环引用得时候，就可以用 this.$refs['子组件'].children[’索引']，获取到对应子组件得的实力，然后操作方法或者修改数据

$parent 在子组件里获取父组件的实例，然后修改父组件数据或者调用父组件方法

子

this.$parent.sendInfo("666")

父

sendInfo(val){
   console.log("获取到子组件数据"，val)
}

隔代组件传参  provide inject

在vue项目开发的时候，有时候会遇到隔代组件的数据交互，这个时候，我们可以使用 

provide 和 inject传参

祖 组件

  data() {
    return {
      info: {
        name: "小天",
        age: 24,
      },
      sex: "男",
    };
  },
  provide(){
    return{
      sexSendInfo:()=>this.info
    } 
  },

孙

  inject: ["sexSendInfo"],

然后在页面中使用 inject:[”变量名“] 即可

以上是本人常用的vue传参的几种方式，希望能对 大家有所帮助