Vue组件传值方式(props属性,父到子,子到父,兄弟传值)

笑飞

前言

1. Vue

复制代码

是数据驱动视图更新的框架，平时写业务时，都会把页面不同模块拆分成一个一个vue组件， 所以对于vue来说组件间的数据通信非常重要
提示：以下是本篇文章正文内容，下面案例可供参考

一、props是什么？

• 1. props

  复制代码
  是
  1. Vue

  复制代码
  实例上的一个属性,用于组件的传值
  
• 1. 作用:

  复制代码
  为了接收外面传过来的数据，与
  1. data、methods

  复制代码
  等是一个级别的配置项。
  
• 1. props

  复制代码
  在子属性和父属性之间形成一个单向向下的绑定(单向数据流)
  
• 当父属性更新时，它会向下流向子属性，但不会反过来。这可以防止子组件意外改变父组件的状态
  

使用规则

1. <script>
   
2. export default {
   
3.         //使用方式一
   
4.     props:["count"],
   
5.     //使用方式二
   
6.     props:{
   
7.         count:{
   
8.                 //type:类型规定
   
9.             type:Number,
   
10.             //default:默认值
    
11.             default:0,
    
12.             //require:是否是必传
    
13.             require:true,
    
14.         }
    
15.     },
    
16. }
    
17. </script>

复制代码

二、父传子 props




实现步骤

• 父传子通过
  1. props

  复制代码
  实现
  
• 父组件通过自定义变量传入子组件
  
• 子组件利用
  1. props

  复制代码
  接收父组件值
  
• 接收
  1. props

  复制代码
  不能修改,但是可以在组件中直接使用
  
• 如果想要修改
  1. props

  复制代码
  ,先把
  1. props

  复制代码
  赋值给其他变量,在进行修改
  

代码实现

1. //父组件
   
2. <template>
   
3.   <div style="outline:1px solid red">
   
4.     <h1>我是父组件</h1>
   
5.     <button @click="count+=1">要传递的值{{count}}</button>
   
6.     //第三步通过v-bind动态传入子组件
   
7.     <Child :count="count"></Child>
   
8.   </div>
   
9. </template>
   
10. 
    
11. <script>
    
12. //第一步导入组件
    
13. import Child from "../child/index.vue"
    
14. export default {
    
15. //第二步组件注册
    
16.     components:{
    
17.         Child,
    
18.     },
    
19.     data () {
    
20.     return {
    
21.       count: 1
    
22.     }
    
23.   }
    
24. }

复制代码

1. //子组件
   
2. <template>
   
3.   <div style="outline:1px solid green">
   
4.     <h1>我是子组件</h1>
   
5.     // 第二步在页面中使用
   
6.     <div>接收父组件传值:{{count}}</div>
   
7.   </div>
   
8. </template>
   
9. 
   
10. <script>
    
11. export default {
    
12.         //第一步利用 props 接收
    
13.         //可以直接在页面中使用,但不可修改;修改需要先将 props 中的数据赋值给 data 中的变量
    
14.         // props:["count"],
    
15.     props:{
    
16.         count:{
    
17.             type:Number,
    
18.             default:0,
    
19.             require:true,
    
20.         }
    
21.     },
    
22. }

复制代码

效果展示

二.子传父 $emit

实现步骤

• 子传父通过
  1. $emit

  复制代码
  实现
  
• 在子组件中通过
  1. $emit

  复制代码
  方法传值给父组件
  
• 在父页面中的子组件标签中自定义事件接收
  

代码实现

1. //子组件
   
2. <template>
   
3.   <div style="outline:1px solid green">
   
4.     <h1>我是子组件</h1>
   
5.     <button @click="give">传递给父组件</button>
   
6.   </div>
   
7. </template>
   
8. 
   
9. <script>
   
10. export default {
    
11.   methods:{
    
12.     give(){
    
13.          //第一步调用 $emit 传递参数
    
14.          //emit 中第一个参数是在父页面中接收的 事件名称
    
15.          //emit 中第二个尝试是要传递的数据
    
16.       this.$emit("child",`我是子组件值+ ${new Date().getTime()}`)
    
17.     }
    
18.   }
    
19. }

复制代码

1. // 父组件
   
2. <template>
   
3.   <div style="outline:1px solid red">
   
4.     <h1>我是父组件</h1>
   
5.        <div>我是接收子组件的值:{{this.childValue}}</div>
   
6.        // 第一步在子组件中自定义事件接收 emit 传递的事件
   
7.     <Child :count="count" @child="accept"></Child>
   
8.   </div>
   
9. </template>
   
10. 
    
11. <script>
    
12. import Child from "../child/index.vue"
    
13. export default {
    
14.     components:{
    
15.         Child,
    
16.     },
    
17.     data () {
    
18.     return {
    
19.       childValue:"",
    
20.     }
    
21.   },
    
22.   methods:{
    
23.           // 第二步在事件接收使用 子组件的传值
    
24.     accept(obj){
    
25.       this.childValue = obj
    
26.     }
    
27.   }
    
28. }

复制代码

效果展示

三.兄弟传值 EventBus

实现步骤

• 兄弟之间传值通过 EventBus实现
  
• 在components文件中新建一个 js 文件,页面中导入Vue实例,然后导出一个new Vue()
  
• 在需要兄弟之间传值的组件中导入这个文件
  
• 传值时通过导入的文件调用$emit 实现($emit("事件名称",需要传递的值))
  
• 接收时通过导入的文件调用$on通过回调函数实现
  

代码实现

1. // component 文件夹中新建 eventBus.js 文件,用来实现兄弟组件通信
   
2. import Vue from "vue";
   
3. 
   
4. export default new Vue()

复制代码

1. // 组件 A
   
2. <template>
   
3. <div style="width: 100%; height: 100px; outline: 1px solid red">
   
4.    <button @click="send">A组件给B组件传值</button>
   
5. </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. import bus from "../eventBus";
   
10. export default {
    
11. methods: {
    
12.    send() {
    
13.      bus.$emit("share", `我是A组件+ ${new Date().getTime()}`);
    
14.    },
    
15. },
    
16. };
    
17. </script>
    
18. 
    
19. <style lang="less" scoped>
    
20. </style>

复制代码

1. // 组件 B
   
2. <template>
   
3.     <div style="width:100%;height:100px;outline:1px solid green">
   
4.         接收A组件的值{{this.accept}}
   
5.     </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. import bus from "../eventBus"
   
10.     export default {
    
11.         data(){
    
12.             return{
    
13.                 accept:''
    
14.             }
    
15.         },
    
16.         mounted(){
    
17.             bus.$on("share",val=>{
    
18.                 this.accept = val
    
19.             })
    
20.         }
    
21. }
    
22. </script>

复制代码

效果展示

总结

• 父传值子通过
  1. props

  复制代码
  实现
  
• 子传父通过
  1. emit

  复制代码
  自定义事件 实现
  
• 兄弟传值通过
  1. eventBus

  复制代码
  实现
  

目前暂时总结三种常用的组件传值方法
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/3223644n4.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！