vue组件通信1：父传子（props）

2024-05-12 05:23:28

一，前言

1.props用于父子组件的通信。

2.props具有单向下行绑定，由父组件传递给子组件。

二，子组件`props`声明

1.props是Vue Option Api的一个选项，声明该组件接受父组件传递的props，可接受数组和对象。

（1）数组：props:['title','content'] 。

（2）对象：props:{ title:Number }

2.使用对象形式可以对props进行 值类型校验 和 设置默认值。

（1）类型校验：

{props:{title:String, //单类型  title:[Number,Boolean] //多类型title:{ type:String } //注意所有类型不能加引号}
}

（2）必填校验

{props:{title:{ required:true } }
}

（3）自定义验证函数：函数返回布尔值，为true验证通过

{props:{title:{ validator:(v)=>typeof v =='number'} }
}

（4）设置默认值：注意对象或数组默认值必须从一个工厂函数获取

{props:{title:{ default:"hello world"} list:{ type:Array, default:()=>[1,2,3]} //对象或数组默认值必须从一个工厂函数获取}
}

3.子组件不能修改props，若需要修改props的值，可以把props作为初始值赋值给组件自己的data

4.在一个组件中，props可以像data一样被使用，除了不能被修改。

三，父组件`props`传递

1.子组件使用驼峰命名的props,父组件传递给子组件时需要使用-分割： dogName -> dog-name。

2.为了方便书写，当子组件接受的props较多，可以使用一个对象全部传入，此时直接使用v-bind='objName'即可。（类似于react的{...props}）

let post ={a,b}
<Post v-bind="post"/>
等价于
<Post v-bind:a="post.a" v-bind:b="post.b" />

四，非`props`的属性

1.非props的属性是指父组件传递给子组件，而子组件并未声明相应的props的属性

2.默认情况下，非props的属性会被直接加在子组件的根节点上。

3.例如在子组件上定义style，class,或者事件会被直接加在根元素上。

4.inheritAttrs是配置对象的一个属性，我们可以在子组件使用inheritAttrs:false来禁用这种默认行为

五，注意事项

1.由于在子组件不能修改props，所以不能直接把props作为v-model的值，

vue组件通信1：父传子（props）相关推荐

Vue组件通信：父传子、子传父、跨组件通信
方法一:组件通信_父传子_props(属性绑定) 在进行组件通信之前,我们首先要明确父和子是谁,父传子=>在父中引入子(被引入的是子) 1. 父传子,要先在子组件内定义props变量,准备接收, ...
vue组件通信：父传子—子传父
我们都知道组件是vue里很重要的一个知识点,这里我看的是b站上的coderwhy老师的视频我看到了弹幕上说很多人在这一块不理解:下面我就来写分享以下我的课程总结父传子为什么要进行"传& ...
详细讲解vue2组件通信(一)——父传子props
文章结构父组件怎么发送数据子组件怎么接收? 简单接收复杂接收不满足校验规则的一些报错信息(常见于用开源ui组件库时) 数据类型不对必传未传自定义校验函数未通过 props接收的值存在哪? ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
Vue3 - 组件通信（父传子）
前言在 Vue3 中,父组件向子组件传参的方法. 与 Vue2 相比,还是有一些区别的. 基础示例现在我们的需求是,要通过父组件,传递一个标题来让子组件显示. 子组件 Com.vue: <t ...
自我总结篇之vue的组件通信（父传子子传父非父子）
一:父传子父组件代码如下: <template><div class="father"><child :message='message' :mes ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
vue组件通讯：父传子、子传父、事件发射详解
1.组件通讯每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据, 怎么办呢? => 组件通信组件通信的方式有 ...
vue组件通信：父与子、子与父
父与子.子与父通信 1. 组件通信 1.1 组件嵌套 1.2 组件嵌套步骤 1.3 父与子.子与父通信 1.4 实现案例图示 2. 父组件与子组件通信 2.1 父与子通信 2.2代码实现父与子及详细说 ...
vue-cli 组件传值：父传子props
组件怎么使用点这页,本页就直奔主题了啊一.基本传值: 1.在父组件的标签上定义属性,值就是你要传的数据,如下: 2.然后在子组件通过props属性接收传来的值,如下: 父传子的基本传值就完事啦看效 ...

最新文章

热门文章