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

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

1.父传子

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

xml 复制代码
父组件
<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>
xml 复制代码
子组件
<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

xml 复制代码
父组件
<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>
xml 复制代码
子组件
<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

xml 复制代码
子组件
<template>
  <div>
    <p>{{ messageFromChild }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageFromChild: 'Hello from child!'
    };
  }
};
</script>
xml 复制代码
父组件
<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

xml 复制代码
子组件
<template>
  <div>
    <button @click="childMethod">Call Child Method</button>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      alert('Method in child component called!');
    }
  }
};
</script>
xml 复制代码
父组件
<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是否存在,以避免潜在的错误。

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

相关推荐
lalalalalalalala11 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy11 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
久爱@勿忘43 分钟前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen021144 分钟前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依1 小时前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui
行云&流水1 小时前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
弗锐土豆2 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
1undefined22 小时前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
wangpq2 小时前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js
豆苗学前端2 小时前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试