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是否存在,以避免潜在的错误。

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

相关推荐
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色9 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅10 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
G_whang11 小时前
jenkins部署前端vue项目使用Docker+Jenkinsfile方式
前端·vue.js·jenkins
荔枝荔枝荔枝11 小时前
【Vue源码学习】Vue新手友好!为什么vue2 this能够直接获取到data和methods中的属性?
vue.js·源码
寻觅~流光11 小时前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
江上暮云12 小时前
手摸手带你彻底搞懂Vue的响应式原理
vue.js
恰薯条的屑海鸥12 小时前
前端进阶之路-从传统前端到VUE-JS(第五期-路由应用)
前端·javascript·vue.js·学习·前端框架
wangpq12 小时前
Echart饼图自动轮播效果封装
javascript·vue.js