vue3之组件通信
- 1 props父传子，子传孙
- - 1-1 父组件
  - 1-2 子组件
  - 1-3 孙组件
- 2：父子传值
- - 2:-1 父组件向子组件传值 Props
  - 2-2 子组件向父组件传值 emit
- 3：使用ref 拿到子组件的数据
- 4：父传子 props传递 function
- - 4-1父组件
  - 4-2子组件

vue3之组件通信

vue3之中的组件，再引入的时候，可直接使用，不用类似vue2时，还得再components 组成当前组件，才能使用

1 props父传子，子传孙

1-1 父组件

<NavList :navList="item.data"></NavList>let navList = reactive([{tab: "天天神卷",data: [{pic: "https://img0.baidu.com/it/u=2735725699,3536201611&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=330",title: "酸菜鱼1",sales: "2888",price: 10,label: ['门店上新','很下饭'],},{pic: "https://img0.baidu.com/it/u=3117431038,1238343094&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",title: "猪脚饭1",sales: "3000",price: 10,label: ['门店上新','很下饭'],},],},{tab: "减配送费",data: [{pic: "https://",title: "酸菜鱼2",sales: "2888",price: 20,label: ['门店上新','很下饭'],},],}
]);

1-2 子组件

<template><div class="nav-list"><div v-for="(item, idx) in navList" :key="idx"><NavListItem :navListItem="item"></NavListItem></div></div>
</template><script setup lang="ts" name="NavList">
import { toRefs, defineProps } from "vue";
import NavListItem from "./NavListItem.vue";
const props = defineProps<{navList: {pic: string;title: string;sales: string;price: number;label: string[]; // ['门店上新,"很下饭"']};
}>();
const { navList } = toRefs(props);
</script>

1-3 孙组件

<template><div class="nav-list-item"><img :src="navListItem.pic" class="item-img" /><div class="item-right"><div class="title">{{ navListItem.title }}</div><div class="sales">{{ navListItem.sales }}</div><div class="price">{{ navListItem.price }}</div><div class="label"><span v-for="(item, idx) in navListItem.label" :key="idx">{{  item  }}</span></div></div></div>
</template><script setup lang="ts" name="NavListItem">
import { toRefs, defineProps } from "vue";type NavListItem = {pic: string;title: string;sales: string;price: number;label: string[]; // ['门店上新,"很下饭"']
};
const props = defineProps<{navListItem: NavListItem;
}>();
const { navListItem } = toRefs(props);
</script>

2：父子传值

2:-1 父组件向子组件传值 Props

不添加默认值时
- defineProps<Props>()

添加默认值

withDefaults(defineProps<Props>(), {title: '默认值',
})

layout.vue 父组件
- 向子组件传递一个字符串的 title 和一个number类型的数组

<template><div class="layout"><div><Menu title="我是title" :list="list"></Menu></div></div>
</template><script setup lang="ts">
import { reactive } from 'vue'
import Menu from './menu/Menu.vue'const list = reactive<number[]>([1, 2, 3])
</script>

menu.vue 子组件
- 使用defineProps() 去接受子组件的数据
- 使用 type Props 来限制子组件传递的数据的类型

<template><div class="menu">menu{{ title }}<div><div v-for="item in list" :key="item">{{ item }}</div></div></div>
</template><script setup lang="ts">
type Props = {title: Stringlist: number[]
}defineProps<Props>()
</script>
<style lang="scss" scoped>
.menu {width: 200px;height: 100%;border: 1px solid #ccc;
}
</style>

2-2 子组件向父组件传值 emit

使用 defineEmits 来定义需要发射的事件
- 然后通过 emit 来发射事件以及携带参数，传递到父组件
子组件
- 向父组件发射一个 change-menu事件，携带sonList, false两个参数

<template><div class="menu">{{ title }}<div><div v-for="item in list" :key="item">{{ item }}</div></div><button @click="sonClick">子组件传递数据</button></div>
</template><script setup lang="ts">
import { reactive } from 'vue'type Props = {title: Stringlist: number[]
}
defineProps<Props>()
const sonList = reactive<number[]>([22, 33, 44])
// 若是有多个 emit事件 则写法 defineEmits(['change-menu','XXX'])
const emit = defineEmits(['change-menu'])
const sonClick = () => {emit('change-menu', sonList, false)
}
</script>

父组件

<template><div class="layout"><div><Menu @change-menu="fatherClick" title="我是title" :list="list"></Menu></div></div>
</template><script setup lang="ts">
import { reactive } from 'vue'
import Menu from './menu/Menu.vue'const list = reactive<number[]>([1, 2, 3])
// 父组件 接受子组件的事件
const fatherClick = (list: number[], flag) => {console.log('list', list, flag)
}
</script>

3：使用ref 拿到子组件的数据

父组件

<template><div class="layout"><div><Menu ref="menuRef" @change-menu="fatherClick" title="我是title" :list="list"></Menu></div><div class="layout-right"><Header></Header><Main></Main></div></div>
</template><script setup lang="ts">
import { reactive, ref } from 'vue'
import Header from './header/Header.vue'
import Main from './main/Main.vue'
import Menu from './menu/Menu.vue'const menuRef = ref(null)const list = reactive<number[]>([1, 2, 3])
const fatherClick = (list: number[], flag) => {// console.log('list', list, flag)console.log('menuRef', menuRef.value, menuRef.value.sonList)
}
</script>

子组件

<template><div class="menu">menu{{ title }}<div><div v-for="item in list" :key="item">{{ item }}</div></div><button @click="sonClick">子组件传递数据</button></div>
</template><script setup lang="ts">
import { reactive } from 'vue'type Props = {title: Stringlist: number[]
}
defineProps<Props>()
const sonList = reactive<number[]>([22, 33, 44])
// 若是有多个 emit事件 则写法 defineEmits(['change-menu','XXX'])
const emit = defineEmits(['change-menu'])
const sonClick = () => {emit('change-menu', sonList, false)
}
// ref 派发数据
defineExpose({sonList,
})
</script>

4：父传子 props传递 function

4-1父组件

 <CartDeatia v-if="isShow" :changeShow="changeShow"></CartDeatia>const changeShow = () => {isShow.value = false;
};

4-2子组件

const props = defineProps<{changeShow: {// type: () => void;type:Functionrequired: true;};
}>();props?.changeShow()

vue3之组件通信（props父传子，子传孙）（ts定义数组类型）相关推荐

四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
Vue3 - 组件通信（父传子）
前言在 Vue3 中,父组件向子组件传参的方法. 与 Vue2 相比,还是有一些区别的. 基础示例现在我们的需求是,要通过父组件,传递一个标题来让子组件显示. 子组件 Com.vue: <t ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
Vue组件通信：父传子、子传父、跨组件通信
方法一:组件通信_父传子_props(属性绑定) 在进行组件通信之前,我们首先要明确父和子是谁,父传子=>在父中引入子(被引入的是子) 1. 父传子,要先在子组件内定义props变量,准备接收, ...
vue组件通信：父与子、子与父
父与子.子与父通信 1. 组件通信 1.1 组件嵌套 1.2 组件嵌套步骤 1.3 父与子.子与父通信 1.4 实现案例图示 2. 父组件与子组件通信 2.1 父与子通信 2.2代码实现父与子及详细说 ...
vue3 父子组件通信
前提:封装组件是前端开发必备的,所以父子组件的通信相当重要,接下来总结下vue3父子组件通信的知识点,使用<script setup>语法糖一.defineProps 和 defineE ...
详细讲解vue2组件通信(一)——父传子props
文章结构父组件怎么发送数据子组件怎么接收? 简单接收复杂接收不满足校验规则的一些报错信息(常见于用开源ui组件库时) 数据类型不对必传未传自定义校验函数未通过 props接收的值存在哪? ...
自我总结篇之vue的组件通信（父传子子传父非父子）
一:父传子父组件代码如下: <template><div class="father"><child :message='message' :mes ...
vue组件通信：父传子—子传父
我们都知道组件是vue里很重要的一个知识点,这里我看的是b站上的coderwhy老师的视频我看到了弹幕上说很多人在这一块不理解:下面我就来写分享以下我的课程总结父传子为什么要进行"传& ...

vue3之组件通信（props父传子，子传孙）（ts定义数组类型）

目录

vue3之组件通信

1 props父传子，子传孙

1-1 父组件

1-2 子组件

1-3 孙组件

2：父子传值

2:-1 父组件向子组件传值 Props

2-2 子组件向父组件传值 emit

3：使用ref 拿到子组件的数据

4：父传子 props传递 function

4-1父组件

4-2子组件

vue3之组件通信（props父传子，子传孙）（ts定义数组类型）相关推荐

最新文章

热门文章

vue3之组件通信 （props父传子，子传孙）（ts定义数组类型）

目录

vue3之组件通信

1 props父传子，子传孙

1-1 父组件

1-2 子组件

1-3 孙组件

2：父子传值

2:-1 父组件向子组件传值 Props

2-2 子组件向父组件传值 emit

3：使用ref 拿到子组件的 数据

4：父传子 props传递 function

4-1父组件

4-2子组件

vue3之组件通信 （props父传子，子传孙）（ts定义数组类型）相关推荐

最新文章

热门文章

vue3之组件通信（props父传子，子传孙）（ts定义数组类型）

3：使用ref 拿到子组件的数据

vue3之组件通信（props父传子，子传孙）（ts定义数组类型）相关推荐