Uniapp父子组件通信详解

一、Props属性

子组件通过props属性接受父组件传递的数据，然后在子组件内部使用。示例代码如下：

//父组件

  

<script>
export default {
  data() {
    return {
      parentName: '父组件传递的数据'
    }
  }
}
</script>

//子组件

  

<script>
export default {
  props: ['name']
}
</script>

在父组件中使用子组件标签的props属性来传递数据。子组件在props属性中定义接收数据的名称，然后在子组件内部使用。

二、通过事件传递数据

子组件可以通过事件的方式向父组件传递数据，父组件可以监听子组件的事件来接收数据。示例代码如下：

//子组件

  

<script>
export default {
  methods: {
    sendData() {
      this.$emit('childevent', '子组件传递的数据');
    }
  }
}
</script>

//父组件

  

<script>
export default {
  data() {
    return {
      parentData: ''
    }
  },
  methods: {
    getData(data) {
      this.parentData = data;
    }
  }
}
</script>

在子组件中通过$emit()方法触发自定义的事件，在父组件中使用子组件标签的@childevent属性来监听事件并接收子组件传递的数据。

三、Provide和Inject

Provide和Inject是Vue2.2新增的API，Uniapp也支持。它们提供了一种祖先组件向后代组件传递数据的方式。Provide和Inject的使用方式类似于props，但是它们传递数据的方式相对更为灵活，不限定传递的数据类型。示例代码如下：

//父组件

  

<script>
export default {
  provide: {
    parentData: '父组件提供的数据'
  }
}
</script>

//子组件

  

<script>
import Grandson from './Grandson.vue'

export default {
  components: { Grandson }
}
</script>

//孙子组件

  

<script>
export default {
  inject: ['parentData']
}
</script>

在父组件中使用provide提供数据，然后在子孙组件中使用inject来接收数据。

四、Ref属性

Ref是取得组件的一种方法，可以通过$refs对象在父组件中访问子组件。Ref除了取得子组件之外，还可以取得DOM元素或者某个页面实例。示例代码如下：

//父组件

  

<script>
export default {
  methods: {
    callMyChild() {
      this.$refs.myChild.childMethod(); //访问子组件的方法
    }
  }
}
</script>

//子组件

  

<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件的方法');
    }
  }
}
</script>

在父组件中使用ref来给子组件取一个别名，然后通过$refs对象来访问子组件的方法。