父子组件通信——父传子props

在父组件与子组件中，为了实现父子组件之间的通信，需要使用props，来实现父组件中的内容被子组件所使用。在子组件中使用props来进行与父组件之间的通信。
在使用组件时通过绑定props中定义的变量与父组件中的属性，实现父组件的属性传递到子组件，子组件就可以使用父组件的属性了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>父传子组件props</title>
</head>
<body>
<div id="app"><cpn :c-foods="foods" :c-message="message"></cpn>
</div>
<template id="cpn"><div><ul><li v-for="item in cFoods">{{item}}</li></ul><h2>{{cMessage}}</h2></div>
</template>
<script src="js/vue.js"></script>
<script>const cpn = {template: '#cpn',props: {'cFoods': {},'cMessage': {}},data() {return {};}}const app = new Vue({el: '#app',data: {foods: ['回锅肉', '糖醋里脊', '鱼香肉丝', '糖醋鲤鱼'],message: '欢迎来到本系统'},components: {cpn}})
</script>
</body>
</html>

对于props来说，可以对其进行类型限制、提供默认值

类型限制

props: {'cFoods': Array,'cMessage': String}

提供默认值

'cMessage': {type: String,default: '1234567'}

必须传值

'cMessage': {type: String,default: '1234567',required: true}

类型为对象或数组

当类型为对象(Object)或者数组(Array)时，默认值必须为函数，否则会报错

'cMessage': {type: Array,default() {}}

当props中的变量使用驼峰命名法时，在调用组件时，若使用驼峰命名法进行绑定时，系统不会识别，所以在调用组件时，绑定时使用“-”。

<div id="app"><cpn :c-foods="foods" :c-message="message"></cpn>
</div>props: {'cFoods': Array,'cMessage': {type: Array,default() {}}

父子组件通信——父传子props相关推荐

父子组件通信-父传子
在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. 其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示. 这个时候,并不 ...
React组件通信(父传子,子传父) - 前端
父组件向子组件传值(通过props传值) 子组件: class Children extends Component{constructor(props){super(props);}render() ...
VUE组件通信——父传子、子传父
一.父传子父组件: <ModuleTree ref="moduleTreeRef" :showCheckBox="true" v-on:handleCh ...
React中的组件通信——父传子、子传父、Context
0.认识组件间的通信在开发过程中,我们会经常遇到需要组件之间相互进行通信: 比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据 ...
Vue组件通信(父传子、子传父、兄弟通信)
一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动父->子 (子组件中修改props数据,是无效的,会有一个红色警告) 1 . 父组件parent.vue代码如下: ...
Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
Vue2组件间通信——父传子值props
Vue2组件间通信--父传子值props Vue2中组件间通信系列,本篇是关于父组件向子组件传值的介绍,这里我会用通俗的语言帮助大家理解props配置项功能: 子组件可以接收到父组件传递的数据信息, ...
Vue组件之间的通信-父传子-子传父
文章目录 Vue的组件嵌套 Vue组件间通信 1.父组件传递给子组件 1.1数组的方式 1.2对象的方式 2.子组件传递给父组件 Vue的组件嵌套前面我们是将所有的逻辑放到一个App.vue中: 在 ...