Vue组件传值之props与emit

最新推荐文章于 2025-06-13 20:59:42 发布

原创最新推荐文章于 2025-06-13 20:59:42 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了Vue.js中props用于父组件向子组件传递参数，子组件不能直接修改props的值。而emits则是子组件向父组件发送事件，通过调用父组件定义的方法来改变父组件的状态。props保证了单向数据流，如果需要子组件修改数据，需通过事件触发父组件的更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

props与emits 传参的用法与注意事项

Props传递的是参数，用于父传子，props写在子组件，作为子组件在父组件中调用时的一个标签，变量在父组件中声明。
将父组件定义的值传给子组件
父组件

<script>
import Content from "./Contents.vue";  // 引入组件
export default {
components: {
  Content,
},
setup() {
  let isClose = ref(false);  
  return {
    isClose,
  };
},
};
</script>
<template>
<div class="content">
  <Content :isClose="isClose" ></Content>
</div>
</template>

子组件

<script>
export default {
// 父组件传过来的值是无法修改的
props: ["isClose"],
};
</script>

<template>
<div class="header">
  <div class="icon">
    <el-icon v-if="isClose" ><Expand /></el-icon>
    <el-icon v-else > <Fold /></el-icon>
  </div>
</div>
</template>

Emits传递的是事件，在子组件中接收emits，调用emit函数，接收父组件中自定义的事件方法。
将父组件中自定义的方法传给子组件，以实现通过子组件的事件来对父组件中的值进行修改
父组件

<script>
import Content from "./Contents.vue";
export default {
 components: {
   Content,
 },
 setup() {
   let isClose = ref(false);
   // 实现切换导航栏的收缩状态
   const change = () => {
     isClose.value = !isClose.value;
   };
   return {
     isClose,
     change,
   };
 },
};
</script>
<template>
 <div class="content">
   <Content :isClose="isClose" @change="change"></Content>
 </div>
</template>

子组件

<script>
export default {
 // 父组件传过来的值是无法修改的
 props: ["isClose"],
 emits: ["change"],
 setup(props, { emit }) {
   const change = () => {
     emit("change", change);
   };
   return {
     change,
   };
 },
};
</script>
<template>
 <div class="header">
   <div class="icon">
     <el-icon v-if="isClose" @click="change"><Expand /></el-icon>
     <el-icon v-else @click="change"> <Fold /></el-icon>
   </div>
 </div>
</template>

将父组件传递过来的isClose值通过点击事件进行修改，props与emits的结合

由于props传递的数据是单向数据流，即父组件的值改变，则子组件的数据随之而改变，但是子组件中的值改变不会影响父组件中的值，因为我们是传参，所以如果我们要 修改子组件中的值，我们应该反向操作，通过修改父组件的值来达到目标，也有方法能够实现子组件修改数据而不受父组件的约束，通过将传来的数据本地化可以实现，但是这样的话就只能获取父组件传来的初始值，没有太大意义。