uniapp父子组件传值

灰太狼 2021-09-13 15:54 662阅读 0赞

父组件页面（parent.vue）

  1. <template>
  2.     <view>
  3.         <Child @out=out :backGround=backGround></Child>
  4.     </view>
  5. </template>
  6. <script>
  7.     import Child from "../../components/child.vue";
  8.     export default{ 
  9.         components:{ 
  10.             Child
  11.         },
  12.         data() { 
  13.             return { 
  14.                 backGround:"red"
  15.             }
  16.         },
  17.         methods: { 
  18.             out(e){ 
  19.                 console.log("接收到的值==>>"+e) //接收方法
  20.             }
  21.         }
  22.     }
  23. </script>
  24. <style>
  25. </style>

子组件页面（child.vue）

  1. <template>
  2.     <view class="content" :style="[{background:backGround}]">
  3.         <button @tap="miss">点击传值</button> //子组件点击事件
  4.     </view>
  5. </template>
  7. <script>
  8.     export default { 
  9.         props:{ 
  10.             backGround:{  //参数名
  11.                 type:String, //参数名
  12.                 default:"#fff" //参数默认
  13.             }
  14.         },
  15.         methods:{ 
  16.             miss(){ 
  17.                 this.$emit("out","hahaha") //子传父
  18.             }
  19.         }
  20.     }
  21. </script>
  23. <style>
  24.     .content{ 
  25.         width: 400upx;
  26.         height: 400upx;
  27.     }
  28. </style>

在父组件中引入子组件

在这里插入图片描述

父传子（props）

在子类props里定义接收参数
在这里插入图片描述
在子类标签写上引用
在这里插入图片描述
然后在父类写上准备传递的参数
在这里插入图片描述
此时，父组件传到子组件的值，就会覆盖默认背景色
在这里插入图片描述

子传父（$emit）

需要首先在子类组件定义事件
在这里插入图片描述
在子类写上触发事件
在这里插入图片描述
在父类引用标签上写上在子类$emit里面定义的方法名,以及接收方法

在这里插入图片描述
在这里插入图片描述
然后点击子类触发,就可以传值给父类
在这里插入图片描述

注意：

1.父传子用props；子传父用$emit()

2.子组件中的miss方法中this.$emit(‘out’,“hahaha”); //向父组件提交一个事件和值

其中，$emit中的’out’是父组件的方法名，hahaha是要传的值。

这个方法在父组件中以@out=”out”关联给父组件的out方法，然后这个父组件的out方法就可以接收子组件传来的hahahaa（实现了子组件修改父组件的目的）

发表评论

表情：
评论列表 （有 0 条评论，662人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue父子组件传值

    Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值： 静态传值就是直接通过props来传递 动态传值是通

    Dear 丶Dear 丶/ 0 赞/ 463 阅读