uni组件传值注意

目录介绍

• 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>