uni组件传值注意

Posted 2021-02-18 yc211

目录介绍

• 01.组件传值遇到坑
• 02.父组件传值给子组件
• 03.子组件传值给父组件

01.组件传值遇到坑

• 子组件给父组件传值注意点
  • 注意子组件触发事件定义的方法，首先在父组件中需要绑定子组件内部对应事件，然后一定要和父控件接受的保持一致，否则无法传递数据。

  //在area.vue中，进行事件触发，传递数据
  this.$emit(‘onConfirm‘,true, selectVal)
  
  //在select-school.vue中，需要在在子组件标签上绑定子组件内部对应事件，并且方法名一致
  <!-- 地区选择器 -->
  <optional :status=‘show‘ @onUpdate=‘onUpdate‘ @onConfirm=‘onConfirm‘></optional>
  

• 遇到疑问？
  • 要是同级的组件，那么该如何传递数据呢？

02.父组件传值给子组件

• 父组件的代码如下

  <!-- 父组件传子组件 -->
  <!-- 父组件内部写法 -->
  <template>
      <view>
          <h2>父组件</h2>
          <!-- 绑定自定义属性传递数据 -->
          <children style="color: #0000FF;" :value="valPar" ></children>
      </view>
  </template>
  
  <script>
      //引入子组件
      import children from "../../pages/ele/element-children1.vue"
      export default {
          data() {
              return {
                  valPar:"父组件传递过来的值"
              }
          },
          components:{
  			//注册子组件
              children
          },
      }
  </script>
  

• 子组件的代码如下

  <!-- 父组件传子组件 -->
  <!-- 子组件内部写法 -->
  <template>
      <h2>子组件收到:{{value}}</h2>
  </template>
  
  <script>
      export default {
          props:{
              value:{
                  type:String,
                  default:"默认值"
              }
          },
          data() {
              return {
                  
              }
          },
      }
  </script>
  

03.子组件传值给父组件

• 父组件的代码如下

  <!-- 子组件传父组件 -->
  <!-- 父组件内部写法 -->
  <template>
      <view>
          <!-- 接收到子组件传递的数据 -->
          <h2>父组件接收到的值:{{valueChild}}</h2>
          <!-- 在子组件标签上绑定子组件内部对应事件，并触发对应回调 -->
          <children style="color: #0000FF;" @Transmit="handle"></children>
      </view>
  </template>
  
  <script>
      //引入子组件
      import children from "../../pages/ele/element-children2.vue"
      export default {
          data() {
              return {
  				//定义属性接收数据
                  valueChild:"",
              }
          },
          components:{
  			//注册子组件
              children
          },
          methods:{
              // 子组件内部触发事件对应回调handle
              handle(val){
                  this.valueChild=val;
              }
          }
      }
  </script>
  

• 子组件的代码如下

  <!-- 子组件传父组件 -->
  <!-- 子组件内部写法 -->
  <template>
      <view>
          <h2>子组件</h2>
          <!-- 点击按钮进行事件触发 -->
          <button @click="handleTransmit">点击给父组件传值</button>
      </view>
  </template>
  
  <script>
      export default {
          data() {
              return {
                  //要传递的数据
                  valueParent: "子组件传递过来的数据"
              }
          },
          methods: {
              handleTransmit() {
                  // 进行事件触发，传递数据
                  this.$emit("Transmit", this.valueParent)
              }
          }
      }
  </script>