vue3父子组件传值中props使用细节浅析
目录
- setup函数的参数
- 一、父组件要给子组件传值时，可以通过props来完成组件的通信
- 二、子组件给父组件传值
- 总结
setup函数的参数
它主要有两个参数：
- 第一个参数：props ：父组件传递过来的属性会被放到props对象中
- 第二个参数：context：包含3个属性
- attrs：所有的非prop的attribute
- slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）
- emit：当我们组件内部需要发出事件时会用到emit
一、父组件要给子组件传值时，可以通过props来完成组件的通信
// 父组件
<template>
// 通过自定义属性的方式给子组件传递数据
<message title="父组件中的值"></message>
</template>
// 子组件
<template>
// 使用父组件传递过来的值
<h2> {{title}} </h2>
</template>
<script>
export default {
// 通过props 接收父组件传递过来的数据,模板中可以直接使用
props: ['title'],
setup(props, context) {
// setup函数中要使用的话，要接收一下
console.log(props.title)
}
</script>
子组件中props两种常见的用法
方式一：字符串数组，数组中的字符串就是父组件中引用子组件时自定义attribute的名称
方式二：对象类型，我们可以在指定attribute名称的同时，指定它需要传递的类型，是否时必须的，默认值等
细节一：props中属性可以指定的类型
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
细节二：props中不同类型的写法
props: {
// 基础类型指定
propA: Number,
// 指定多个类型
propB: [String, Number],
// 指定必传类型
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default() {
return { mes: 'lihua'}
}
},
// 自定义验证函数
propF: {
validator(value) {
return ['warning', 'success'].includes(value)
}
},
// 具有默认值的函数
prorG: {
type: Function,
default() {
return 'default function'
}
}
}
细节三：Props的大小写命名
属性命名不推荐驼峰命名法法，需要用 a-b(短横线分隔命名)
二、子组件给父组件传值
父组件
//父组件
<template>
// 给子组件传递自定义函数
<message @add="addNum"></message>
</template>
<script>
export default {
components: {
message
}
setup() {
const addNum = (value) => {
// 接收子组件传递过来的值
console.log(value)
}
// 导出方法提供给模板使用
return {
addNum
}
}
</script>
子组件
//子组件
<template>
// 使用父组件传递过来的值
<button @click="increment"></button>
</template>
<script>
export default {
// 1. 通过第二个参数 context 接收父组件传递过来的方法
setup(props, context) {
const increment = () => {
// 通过 context.emit触发父组件的方法，第二个参数为传递的参数，可以传递多个
context.emit('add', 100)
context.emit('add', 100, 'aaa', 'bbb')
}
// 导出方法提供给模板使用
return {
increment
}
}
// 2. 通过第二个参数 解构 emits 接收父组件传递过来的函数
setup(props, { emit }) {
const increment = () => {
// 通过emit触发父组件的方法，第二个参数为传递的参数，可以传递多个
emit('add', 100)
emit('add', 100, 'aaa', 'bbb')
}
return {
increment
}
}
}
</script>
总结
到此这篇关于vue3父子组件传值中props使用细节的文章就介绍到这了,更多相关vue3父子组件传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue父组件向子组件传值以及data和props的区别详解
1.在父组件中定义 msg 属性 data:{ msg:'123 -我是父组件中的数据' }, 2.引用子组件 父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用. 把父组件传递过来的 msg 属性,绑定到子组件的 parentmsg 属性上. <com1 :parentmsg="msg"></com1> 3. 在子组件定义部分,需要把父组件传递过来的 parentmsg 属性,先在pro
-
详解vue父子组件间传值(props)
先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入
-
解决vue组件props传值对象获取不到的问题
先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default
-
Vue 使用Props属性实现父子组件的动态传值详解
如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo
-
vue2.0 子组件改变props值,并向父组件传值的方法
为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因: prop 作为初始值传入后,子组件想把它当作局部数据来用: prop 作为初始值传入,由子组件处理成其它数据输出. 对这两种原因,正确的应对方式是: 定义一个局部变量,并用 prop 的值初始化它: props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 定义一个计算属性,处理 prop 的值并返回. prop
-
vue3父子组件传值中props使用细节浅析
目录 setup函数的参数 一.父组件要给子组件传值时,可以通过props来完成组件的通信 二.子组件给父组件传值 总结 setup函数的参数 它主要有两个参数: 第一个参数:props :父组件传递过来的属性会被放到props对象中 第二个参数:context:包含3个属性 attrs:所有的非prop的attribute slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到) emit:当我们组件内部需要发出事件时会用到emit 一.父组件要给子组件传值时,可以通过p
-
vue3父子组件传值 双向绑定及注意问题小结
attribute agruments vue3父子组件传值 双向绑定 及注意事项 https://www.jb51.net/article/269785.htm 可以参考下 首先注意 父子组件传值是单项数据流,vue3中子组件是不能直接修改父组件数据的,vue2中是可以直接使用sync的语法,直接进行修改的而sync修饰符的作用则是简化事件声明及监听的写法. 注意事项: // 父组件 // v-model 没有指定参数名时,子组件默认参数名是modelValue <ChildComp v-mo
-
vue3 父子组件传值详解
现在距离vue3的诞生已经过了很长时间了,笔者也是近期才开始学习vue3.对比vue2来看,vue3在写法发生了不小的变化,最典型的例子就是vue3通过ref,或者reactive实现数据的响应式.因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化 咱们先看下vue2中的写法 父组件: <!-- 父组件 --> <template> <div> <children :title="title" @getChildr
-
vue3 父子组件间相互传值方式
目录 vue3父子组件相互传值 父向子传值 子组件向父组件传值 vue3父子组件传值的注意事项 解决办法:两种 vue3父子组件相互传值 父向子传值 父 <pie-chart :pieData="post_data.pid" /> 父组件只需在子组件上声明一个变量即可. :代表变量,可以传变量;否则只能传常量 子 export default { props:['pieData'], setup(props,ctx) { const pie_
-
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值 引
-
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组
-
Vue3父子组件传参有关sync修饰符的用法详解
目录 单向数据流讲解 Vue2.x使用 定义事件的形式, 通知父组件修改 .sync 和 update: 的使用 父传子, 传递多个数据的简写 采用v-model简写(要求严格) Vue3.x使用 普通用法 简写 单向数据流讲解 单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用 定义事件的形式
-
Vue3父子组件互调方法的实现
目录 一.父组件调用子组件方法 1.子组件 2.父组件 3.测试结果 4.关于 defineExpose 的官方文档 二.子组件调用父组件方法 1.子组件 2.父组件 3.测试结果 4.关于 defineEmits 的官方文档 下面演示均为使用 setup 语法糖的情况! 一.父组件调用子组件方法 下面演示为使用 setup 语法糖的情况,值得注意的是子组件需要使用 defineExpose 对外暴露方法,父组件才可以调用! 1.子组件 <template> </template>
-
浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat
-
详解Vue之父子组件传值
一.简要介绍 父子组件之间的传值主要有三种:传递数值.传递方法.传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍: (一)传递数值 1.子组件:Header.vue <template> <div> <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 --> <h2>{{msg}}</h2> </div> </template> <script> expo