uniAPP·组件之间调用组件里的方法()或传递数据

uniAPP·组件之间调用组件里的方法()或传递数据

方法一：父调用子组件方法

【aa.vue】子组件

<template>
  <button>点击我</button>
</template>

<script>
  export default {
    methods: {
      emitEvent(msg){
        console.log('接收的数据--------->'+msg)
      }
    }
  }
</script>

【bb.vue】父组件

<template>
  <div id="app">
    <child-a ref="child"></child-a>
    <!--用ref给子组件起个名字-->
    <button @click="getMyEvent">点击父组件</button>
  </div>
</template>

<script>
  import ChildA from './components/aa.vue'
  export default {
    components: {
      ChildA
    },
    data() {
      return {
        msg: "我是父组件中的数据"
      }
    },
    methods: {
      getMyEvent(){
          this.$refs.child.emitEvent(this.msg);
          //调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
      }
    }
  }
</script>

【说明】这里面它用到提供属性名 this.$refs.xxxx

方法二：子组件向父组件传递数据

【aa.vue】子组件

<template>
  <button @click="emitEvent">点击我</button>
</template>

<script>
  export default {
    data() {
      return {
        msg: "我是子组件中的数据"
      }
    },
    methods: {
      emitEvent(){
        this.$emit('my-event', this.msg)
        //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
      }
    }
  }
</script>

【bb.vue】父组件

<template>
  <div id="app">
    <child-a @my-event="getMyEvent"></child-a>
    <!--父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->
  </div>
</template>

<script>
  import ChildA from './components/aa.vue'
  export default {
    components: {
      ChildA
    },
    methods: {
      getMyEvent(e){
          this.ChildA = e.msg;
          this.ChildA = e.msg;
          console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
      }
    }
  }
</script>

【说明】它用到提供属性名this.$emit(xxxx)
【事项】注意：子组件的提交的函数名，和父组件里使用子组件@后的名字是一样的。

方法三：

在子组件里直接调用父组件方法

【aa.vue】子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>

<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

【bb.vue】父组件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>

<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

【说明】