vue子组件和父组件的传值和交互

最新推荐文章于 2024-10-10 09:57:27 发布

原创最新推荐文章于 2024-10-10 09:57:27 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #交互 #javascript

目的：1.通过父组件传值给子组件，子组件展示该值

2.点击子组件中的click事件，然后在父组件中触发该事件，改变一个值再传给子组件

实现1需要：引入defineProps，在子组件中写一个props，在父组件中通过冒号动态绑定传值

实现2需要：引入defineEmits ，在子组件中写一个click事件，再通过emit定义父组件中可以使用的事件，在子组件中定义方法，最后父组件就可以使用了

子组件代码：

<template>
    <div class='con'>
        <header>
            组件测试|{{title}}
            <el-button type="primary" @click="changeTitle()">Primary</el-button>
        </header>
        <section>
        </section>
    </div>
</template>

<script lang='ts' setup>
/** 接口 */
import { reactive, toRefs, ref, computed, onMounted,defineProps,defineEmits } from 'vue';
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { Edit } from "@element-plus/icons";
/** prop */
const props = defineProps({
  title: String
});

const emit = defineEmits(['changeTitle_1']); // 定义可发出的事件
/** 计算属性*/
//const xx = computed(() => [])
/** data */
/** 监听 */
/** 生命周期 */
onMounted(() => {
})
/** methods */
const changeTitle=()=>{
    emit('changeTitle_1', 'changefromCustomList!')
}
/** 接口 */
</script>
<style>
</style>

父组件代码：

<template>
    <CustomList :title="title123" @changeTitle_1="change1"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import CustomList from './components/CustomList.vue'

const title123=ref("this is title");

const change1=(dd)=>{
    title123.value=dd;
}
</script>