标签：slot Vue 示例 emit props 组件 children 传值

一、父子件向子组件传值（props）

1、props

① 子组件

使用props：子组件在props中定义传值类型

② 父组件

背景: 我的项目里有很多面包屑导航的组件（from element-ui）代码量很大，但是其实只需要把每个导航栏的第二个和第三个值改变一下就好了
（我项目里的面包屑导航都只有三项）

2、插槽

vue组件组件传值方式之——插槽的分类(slot、v-slot、slot-scope)以及具体使用（附代码）

父组件向子组件传递内容

是这样：在父组件中使用了< children >< children>,我想在子组件里面传递一些内容
< children > 想传递的内容< children>
结果：加在,< children >标签中间的那些内容，就被传递到子组件的哪个区域了

• 但是！！！ 如果只是这样的话，其实也是不行的，需要在子组件上加一个slot标签，用来接收父组件传过来的内容
• 子组件可以有很多slot来接收父组件传过来的内容
  

二、子组件向父组件传值（emit）

vue组件间传值视频

1.子组件直接使用$emit将内部数据传递给父组件

this.$emit("childByValue",this.childValue);

2.父组件中接收数据

 

<template>
     <child @childByVlaue=" ByVlaue"></dhild>
</template>
methods:{
    ByValue:function(childValue){
          this.name=childValue;
     }
}

三、兄弟组件之间的传值（bus——$ emit、$ on）

① 父组件

② children子组件(emit传送)

③ brother组件（$on接收）

④ main.js

四、vuex

摘自该文的vuex部分

vuex用于组件之间的传值。

五、父组件向后代组件传值（provide、inject）

在children中定义一个子组件（grandson）

① 孩子组件

② 父亲组件（provide）

③ 孙子组件（inject）

标签：slot,Vue,示例,emit,props,组件,children,传值
来源： https://blog.csdn.net/yunxiu988622/article/details/121756803

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。