前端Vue日常工作中--父子组件传值 子传父 父传子

VUE工作中组件传值 (父传子 子传父)

1.父传子

1.1 子组件使用父组件的值data

父组件
<template>
  <div>
    <h1>{{ messageFromParent }}</h1>
    <ChildComponent :message="messageFromParent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromParent: 'Hello from parent!'
    };
  }
};
</script>

子组件
<template>
  <div>
    <p>{{ messageFromParent }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      messageFromParent: this.message
    };
  }
};
</script>

在这个例子中，父组件通过props属性将messageFromParent的值传递给子组件。子组件通过props接收这个值，并将其保存在messageFromParent中，然后可以在子组件的模板中使用它。

需要注意的是，子组件中的props属性声明和父组件中传递的属性名称必须一致。在这个例子中，父组件传递的是messageFromParent，而子组件中使用的是props: [‘message’]，这样它们就能正确地连接起来。

1.2 子组件使用父组件的方法 methods

父组件
<template>
  <div>
    <button @click="callParentMethod">Call Parent Method</button>
    <ChildComponent @customEvent="handleCustomEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callParentMethod() {
      alert('Method in parent component called!');
    },
    handleCustomEvent() {
      alert('Custom event received in parent component!');
    }
  }
};
</script>

子组件
<template>
  <div>
    <button @click="callParentMethod">Call Parent Method from Child</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$emit('customEvent'); // 触发名为'customEvent'的自定义事件
    }
  }
};

在这个例子中，子组件通过$emit方法触发了一个名为customEvent的自定义事件。在父组件中，我们通过在子组件标签上使用@customEvent监听这个自定义事件，并在handleCustomEvent方法中执行相应的逻辑。这就实现了子组件调用父组件的方法的效果。

请注意，$emit的第一个参数是事件名称，可以根据需要命名。在这里，我们使用了customEvent，但你可以根据你的需求选择一个合适的名称。

2.子传父

2.1 父组件使用子组件的值data

子组件
<template>
  <div>
    <p>{{ messageFromChild }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageFromChild: 'Hello from child!'
    };
  }
};
</script>

父组件
<template>
  <div>
    <ChildComponent ref="childComponentRef" />
    <button @click="getParentValue">Get Value from Child</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    getParentValue() {
      const childComponentInstance = this.$refs.childComponentRef;
      if (childComponentInstance) {
        const messageFromChild = childComponentInstance.messageFromChild;
        alert('Value from child component: ' + messageFromChild);
      }
    }
  }
};
</script>

在这个例子中，父组件通过ref引用了子组件，并通过this.$refs.childComponentRef访问了子组件的实例。然后，通过childComponentInstance.messageFromChild获取了子组件中的messageFromChild值，从而在父组件中使用了子组件的值。

需要注意的是，使用ref时需要确保在子组件被挂载之后再去访问，否则可能得到undefined。上述例子中的按钮点击事件是一个简单的例子，实际应用中可能需要在适当的生命周期钩子或事件中访问子组件

2.2 父组件使用子组件的方法 methods

子组件
<template>
  <div>
    <button @click="childMethod">Call Child Method</button>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      alert('Method in child component called!');
    }
  }
};
</script>

父组件
<template>
  <div>
    <ChildComponent ref="childComponentRef" />
    <button @click="callChildMethod">Call Child Method from Parent</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      const childComponentInstance = this.$refs.childComponentRef;
      if (childComponentInstance) {
        childComponentInstance.childMethod(); // 调用子组件的方法
      }
    }
  }
};
</script>

在这个例子中，父组件使用ref引用了子组件，然后通过this.$refs.childComponentRef获取了子组件的实例。接着，通过childComponentInstance.childMethod()调用了子组件的childMethod方法。确保在调用之前检查childComponentInstance是否存在，以避免潜在的错误。

这种方式适用于调用子组件中的任何公共方法。请注意，在实际应用中，确保在适当的生命周期钩子或事件中访问子组件，以避免在子组件还未挂载或准备好的情况下调用其方法。