vue3组件之间通信(二)——子传父属性和方法


前言:理论上来讲,子组件修改父组件的值是可以的,但是由于父组件的可以引用多个子组件,其中一个子组件改了父组件的值后,其他的子组件的数据可能会有问题,所以不推荐使用子组件修改父组件的值,而是在父组件中定义属性和方法,在子组件中修改。

1:setup函数传递属性和方法

(1)子组件传值和方法给父组件

①:父组件

<template>
  <div class="father">
    <h1>父组件:{{ fatherMsg }}</h1>
    <button @click="clickFather">点我(调用子组件的方法)</button>
    <son @getMsessage="getMsessage" />
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import son from "./son.vue";
export default defineComponent({
  components: {
    son,
  },
  setup(prop, ctx) {
    const fatherMsg = ref("");
    function getMsessage(params) {
      fatherMsg.value = params;
      console.log("父组件的方法被触发了one", params);
    }
    return {
      fatherMsg,
      getMsessage,
    };
  },
});
</script>
<style scoped>
.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
</style>

②:子组件

<template>
  <div class="son">
    <h2>子组件</h2>
    <button @click="getMsessage">点我传值给父组件</button>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup(prop, ctx) {
    const message = ref("子组件的值--张三");
    function getMsessage() {
      console.log("进来了");
      ctx.emit("getMsessage", message);
    }
    return {
      message,
      getMsessage,
    };
  },
});
</script>
<style scoped>
.son {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}
</style>

③:效果
在这里插入图片描述

④:代码步骤说明
大致思路就是父组件传一个方法给子组件,然后子组件要传值给父组件的时候,通过点击事件触发父组件的方法,将子组件要传的值当成参数传给父组件的方法,然后就可以在父组件定义一个值用来接收这个参数了
在这里插入图片描述
⑤:子组件传方法给父组件并触发,和上面步骤一样

function getMsessage(params) {
      fatherMsg.value = params;
      console.log("父组件的方法被触发了one", params());
    }
(2)使用ref的方式来在父组件中获取子组件的数据和方法

①:父组件

<template>
  <div class="father">
    <h1>父组件:{{ fatherMsg }}</h1>
    <button @click="clickFather">点我(调用子组件的方法)</button>
    <son ref="sonRef" />
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import son from "./son.vue";
export default defineComponent({
  components: {
    son,
  },
  setup(prop, ctx) {
    const fatherMsg = ref("");
    const sonRef = ref(null);
    function clickFather() {
      console.log("父组件", sonRef.value.message);
      fatherMsg.value = sonRef.value.message;
      sonRef.value.clickSon();
    }
    return {
      fatherMsg,
      clickFather,
      sonRef,
    };
  },
});
</script>
<style scoped>
.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
</style>

②:子组件

<template>
  <div class="son">
    <h2>子组件</h2>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup(prop, ctx) {
    // 子组件的值
    const message = ref("子组件的值--张三");
    // 子组件的方法
    function clickSon() {
      console.log("son的log");
    }
    return {
      message,
      clickSon,
    };
  },
});
</script>
<style scoped>
.son {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}
</style>

③:效果
在这里插入图片描述
④:代码步骤说明

2:script setup 语法糖传递属性和方法

(1)子组件传值和方法给父组件

①:父组件

<template>
  <div class="father">
    <h1>父组件: {{ fatherMsg }}</h1>
    <son @clickFather="clickFather" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import son from "./son.vue";
const fatherMsg = ref("");
function clickFather(params) {
  fatherMsg.value = params;
  console.log("父组件的方法被触发了", params);
}
</script>
<style scoped>
.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
</style>

②:子组件

<template>
  <div class="son">
    <h2>子组件</h2>
    <button @click="clickSon">点我</button>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, ref } from "vue";

const emits = defineEmits(["clickFather"]);
// 子组件的值
const message = ref("父组件的值---李四");
// 子组件的方法
function clickSon() {
  emits("clickFather", "子组件的值4");
}
</script>
<style scoped>
.son {
  width: 200px;
  height: 150px;
  border: 1px solid green;
}
</style>

③效果
在这里插入图片描述

④代码说明:大致逻辑和setup思路是一样的
在这里插入图片描述

(2)使用ref的方式来在父组件中获取子组件的数据和方法

①:父组件

<template>
  <div class="father">
    <h1>父组件: {{ fatherMsg }}</h1>
    <button @click="clickFather">点我触发自组件的值和方法</button>
    <son ref="sonRef" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import son from "./son.vue";

const sonRef = ref(null); // 子组件的ref

const fatherMsg = ref("");
function clickFather() {
  fatherMsg.value = sonRef.value.message;
  sonRef.value.clickSon();
}
</script>
<style scoped>
.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
</style>

②:子组件

<template>
  <div class="son">
    <h2>子组件</h2>
  </div>
</template>
<script setup>
import { ref } from "vue";
// 子组件的值
const message = ref("父组件的值---李四");
// 子组件的方法
function clickSon() {
  console.log("son的log");
}

defineExpose({
  message,
  clickSon,
});
</script>
<style scoped>
.son {
  width: 200px;
  height: 150px;
  border: 1px solid green;
}
</style>

③效果
在这里插入图片描述

④代码说明(重点就是要使用子组件的ref需要defineExpose
在这里插入图片描述

  • 9
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用中的代码是Vue3中的子组件定义的示例,其中使用了Vue3的Composition API来定义子组件。在该示例中,子组件包含一个按钮,点击按钮时会通过`ctx.emit`方法将`message`的值传递给父组件。具体的代码如下所示: ```html <template> <div class="son"> <h2>子组件</h2> <button @click="getMsessage">点我传值给父组件</button> </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ setup(prop, ctx) { const message = ref("子组件的值--张三"); function getMsessage() { console.log("进来了"); ctx.emit("getMsessage", message); } return { message, getMsessage, }; }, }); </script> <style scoped> .son { width: 200px; height: 100px; border: 1px solid green; } </style> ``` 相比于Vue2的写法,在Vue3中使用Composition API的好处是可以将相关的代码逻辑放在一个函数内部,更加清晰和易于管理。在子组件中,我们通过`ref`函数创建了一个响应式的`message`变量,并定义了一个`getMsessage`方法来触发事件并将`message`的值传递给父组件。 另外,引用和引用中的代码也是Vue3中定义子组件的示例,只是写法略有不同。无论是哪种写法,都是为了实现子组件与父组件之间的数据传递和交互。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue3组件之间通信()——子传父属性方法](https://blog.csdn.net/weixin_44784401/article/details/126198480)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值