uniapp自定义组件和父子组件传值

bilibili视频教程

bilibili视频教程
https://www.bilibili.com/video/BV1oy4y1j75s?p=9&spm_id_from=pageDriver&vd_source=98cd809e741003b47a716078038cd594

主要代码
1.父组件中的代码

父组件中的代码

2.子组件中的代码

子组件中的代码

index To me页面中的页面传值

index中调用的方法进行页面之间的传值和监听 页面间的数据传递 其中的name是出参的参数数

对象传值
1.父组件 Parent.vue：

<template>
  <view>
    <child :data="dataFromParent"></child>
  </view>
</template>

<script>
import child from './components/Child.vue';

export default {
  components: {
    child
  },
  data() {
    return {
      dataFromParent: {
        name: 'John',
        age: 30
      }
    };
  }
}
</script>

2.子组件 Child.vue：

<template>
  <view>
    <text>Name: {{ data.name }}</text>
    <text>Age: {{ data.age }}</text>
  </view>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      // 在子组件中创建一个新的变量，并将父组件传递的对象复制给这个变量
      internalData: {}
    };
  },
  created() {
    // 在子组件的created生命周期中，将父组件传递的对象复制给内部变量
    this.internalData = { ...this.data };
  }
}
</script>