Vue中常用的组件传值方式

vue传值方式有：1、prop(父传子)；2、子组件通过$emit触发父组件的自定义事件（子传父）；
3.v-model（双向绑定） 4.refs 5.provide/inject 6.eventBus 7.vuex/pinia(状态管理工具)

下面介绍常用的几种：
父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据。子组件通过事件给父组件发送消息。

prop：（父传子）

父组件通过prpo向下传递
官方文档：链接

父组件

<template>
  <div>
    父组件:
    <input type="text" v-model="par0"> 
    <!-- 引入子组件 -->
    <child :obj0="par0" :obj1="par1" :obj2="par2" :obj3="par3" :obj4="par4" ></child>  //child子组件通过 :par0="par1" 将值传过去
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        par0: '',//通过 v-model双向绑定
        par1: ["123","456"],
        par2: true,
        par3: 123,
        par4: {显示: "否", 显示关闭按钮: "否"}
      }
    }
  }
</script>

子组件

<template>
  <div>
    子组件:
    <span>{{obj0}}</span><!--显示父组件传来的值-->
    <span>{{obj1}}</span><!--显示父组件传来的值-->
    <span>{{obj2}}</span><!--显示父组件传来的值-->
    <span>{{obj3}}</span><!--显示父组件传来的值-->
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      obj0: String,   //在这里对传过来的进行接收  可以设置类型
	  obj1: Array,
	  obj2: Boolean,
	  obj3: Number,
      obj4: {
      		type: Object,
      		default: () => {//可设置默认值
        	return { 显示: "是", 显示关闭按钮: "是" };
      }
    },
    }
  }
</script>

$emit：（子传父）

子组件通过事件给父组件发送消息。
官方文档：链接
父组件

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--引入子组件-->
    <son @getChildValue="methods1($event)"></son>//自定义一个事件,子组件会触发这个事件  $event：表示接收到子组件传递的值
  </div>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    methods1(item){
      alert(item.name);//得到子组件传的值
    }
  },
};
</script>

子组件

//子组件
<template>
  <div> 
    <button @click="transmit(par0)">点我</button>
  </div>
</template>

<script>
export default {
components: { },
data () {
      return {
        par0: {name:"张三",sex:"男"}
      }
    },
  name: '子组件',
  methods: {
    transmit(par0){
      this.$emit("getChildValue", par0)//通过emit来触发父组件中引入子组件定义的事件  第一个参数必须要写父组件中引入子组件定义的事件名，第二个参数是传递的值    也可以不穿第二个参数只触发事件
    }
  },
};
</script>

provide/inject：（父传子(祖父级)）

官方这样说：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。大体意思是也就是说如果所有的组件都依赖一个组件时，可以在最外层的组件向所有依赖此组件的组件传递信息。

官方文档：链接

祖父级组件

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--引入子组件-->
    <son ></son>
  </div>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {
    par1:"123"
    };
  },
  provide() {
    //父组件传递函数或参数   子组件通过inject接收   只要是此组件下的所有组件都可接收此函数或参数
    return {
      processingTextLength: this.methods1,
      text: this.par1
    };
  },
  methods: {
    methods1(par){
      alert(par);//处理
    }
  },
};
</script>

子组件

//子组件
<template>
  <div> 
    <button @click="processingTextLength(par0)">点我</button>//父组件传来的函数
    <button @click="transmit(text)">点我</button>//父组件传来的值
  </div>
</template>

<script>
export default {
name: '子组件',
components: { },
data () {
      return {
        par0: "张三"
      }
    },
inject: ["processingTextLength","text"],//父组件传递的函数   
methods: {
    transmit(par0){
      alert(par0);
    }
  },
};
</script>