vue组件之间数据的传递 - 父传子详解

2024-05-12 02:00:16

简单一点，把根组件作为父组件。

1.1.1. 父子之间不能正常共享数据的

1.1.2. 父组件把数据传递给子组件： 步骤

步骤：

1.1.2.1. 在父组件中，正常定义自己的数据。

1.1.2.2. 在父组件的模板中通过属性绑定把数据绑定到子组件上。

1.1.2.3. 在子组件中定义props属性。用来接收父组件传递的数据。

在props中定义的属性，是专门用来从父组件中去获取数据的，定义好了之，就可以像定义在data中的数据项一样，去正常的使用。

1.1.2.4. 在子组件模板中使用数据

1.1.2.5. 在子组件中的函数中使用数据

1.1. 父传子有一个核心子组件中的props配置项

1.1.1. 父子传递，讲究”你情我愿”

根组件中：明确地给子组件传递数据

子组件中：要通过props明确声明，我要数据

1.1.2. Props

详细的格式：

每一个数据项，都可以加三个属性设置来修饰它。

Props:{

数据项名字:{

type:类型。指明从父组件中传递过来的数据必须是什么类型。它的取值是:Object,Array,String,Number,Boolean 都是构造器。不要写成字符串。

default://默认值。当父组件没有传数据时，就用这个值。

required:true/false 。是否必须一定要传递过来。

}

}

1.1.3. 常见的props格式：

props: {

// 基础类型检测 (`null` 意思是任何类型都可以)

propA: Number,

propB: [String, Number],// 多种类型

propC: {

type: String,// 必传且是字符串

required: true

},

propD: {

type: Number,

default: 100 // 数字，有默认值

},

// 数组/对象的默认值应当由一个函数返回

propE: {

type: Object,

default: function () {

return { message: 'hello' }

}

}

}

1.1.4. 类型必须要一致

这里需要Number,如果不是Number就报错。

1.1.5. 默认值

上面的代码中，是给了值的。所以就会用给了的值。

1.1.6. Require:true 必传项

1.2. 你不能在子组件中修改父组件传递的数据

解决方法：

在子组件中，接收父组件传递的数据之后，你可以用这个数据对自已子组件中定义的数据项去做初始化，然后，你就可以去自己自己在子组件中定义的数据。

vue组件之间数据的传递 - 父传子详解相关推荐

vue组件之间互相传值：父传子，子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
Vue组件之间的通讯方式——父传子、子传父、兄弟组件间的通讯
目录一.父传子 1.props 属性传递 2.方法传递 3. $parent获取方法和属性二.子传父 1. 属性传递 2 .通过$refs主动获取子组件方法和属性 3 .通过$children主动 ...
vue父组给子子组件传html,vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂作笔记-vue 通常页面的视图App.vue应为这样一.父组件向子组件传值浏览器 1.建立子组件,在src/components/文件夹下新建一个C ...
如何实现组件之间的通信（父传子，子传父，兄弟组件互传）
一.父传子 1.父传子通用的方法就是借助props这个属性 (1)如下图我创建了一个Dom组件,并将它引入到父组件App.vue中 (2)下面我在父组件定义一个变量msg并赋值,然后通过在子组件上写上 ...
vue组件之间数据传递和通信方式总结
vue组件之间数据传递和通信方式总结方式主要包括: 父组件=>子组件 | 单向数据流,props 子组件=>父组件 | 观察者模式,即vue的自定义事件 $emit 和 $on 非父子组 ...
vue 子组件调用父组件方法、值（父传子）；父组件调用子组件方法、值（子传父）。
一.子组件调用父组件方法(父传子-方法) 场景:子组件是弹出框组件.当点击确定时,将新增的值增加到父组件的列表.就要调用父组件的getLIst()方法. 代码: //父组件利用@子组件方法名=&qu ...
vue数据传递--父传子-方法传递
vue数据传递二 <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-i ...
组件之间数据信息传递方法
1.props(数据双向绑定,props,可祖传父,父传子能隔代) 将组件中需要传递的东西交给共同的父亲,父亲再将数据交给其中一个儿子,这个过程通过props的方法传递,让son2接收 props[' ...
vue 组件之间数据传递（七）
1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...

最新文章

热门文章