Vue中props传递参数（父传子）

父组件要正向地向子组件传递数据或参数，子组件收到后，根据传递过来的数据不同，渲染不同的页面内容，或者执行操作。
这个正向传递数据的过程是通过props来实现的。子组件使用props来声明需要从父组件接受的数据。
注意的：
在js中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件的。

父组件中

<template><div><HelloWorld  :message1="messageToHelloWorld"></HelloWorld><div/>
<template/>
<script>
import HelloWorld from './components/HelloWorld'export default {name: 'App',data() {return {messageToHelloWorld:'我是父组件向下传递的信息'}},components: {HelloWorld}
}
</script>

子组件中

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Linkssss</h2><h3>{{ message1 }}</h3></div>
</template><script>
export default {name: 'HelloWorld',props: ['message1'],data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>

业务中，还有比较常用的组件验证：

Vue.component('my-component',{props:{//必须是数字类型propA:Number//必须是字符串或数字类型propB:[String,number]//布尔值,如果没有定义，默认值是truepropC:{type:Boolean，default:true},//数字，而且是必传propD:{type:Number,required:true},//如果是数组或对象，默认值必须是一个函数来返回propE:{type:Array,default:function(){return [];}},//自定义一个验证函数propF:{validator:function (value){return value>10}}}
});

props的驼峰命名法

<div id="app"><cpn :c-info="info" :child-my-message="message"></cpn>  </div><template id="cpn"><div><h2>{{cInfo}}</h2><h2>{{childMyMessage}}</h2></div></template>

 const cpn={template:'#cpn',props:{cInfo:{type:Object,default(){return{}}    },childMyMessage:{type:String,default: ''}}}const app=new Vue({el:'#app',data:{info:{name:'why',age:18,height:1.88},message:'hello world'    },components:{cpn}})

Vue中props传递参数（父传子）相关推荐

【Vue】Props传递数据(父传子) 自定义事件(子传父)
文章目录一.定义一个父组件和一个子组件(子组件嵌套在父组件中) 二.Props传递数据(父传子) 1.使用Props数组方式传值 2.对象方式传值三.自定义事件(子传父) 一.定义一个父组件和一个 ...
React (三) 修改props，React父传子、子传父、this绑定
Props介绍与应用什么是 props 如何使用父传子函数组件类组件默认值子传父修改 props 事件监听 this 绑定直接在 jsx 元素上进行绑定(不推荐) 箭头函数(推荐) 直 ...
Vue组件之间的通信-父传子-子传父
文章目录 Vue的组件嵌套 Vue组件间通信 1.父组件传递给子组件 1.1数组的方式 1.2对象的方式 2.子组件传递给父组件 Vue的组件嵌套前面我们是将所有的逻辑放到一个App.vue中: 在 ...
自我总结篇之vue的组件通信（父传子子传父非父子）
一:父传子父组件代码如下: <template><div class="father"><child :message='message' :mes ...
Vue 中 props 传值，父组件向子组件传递对象/数组可以直接修改的问题
vue 中父子组件通信最常用的方式是 props 和 $emit,所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这 ...
vue组件通信1：父传子（props）
一,前言 1.props用于父子组件的通信. 2.props具有单向下行绑定,由父组件传递给子组件. 二,子组件props声明 1.props是Vue Option Api的一个选项,声明该组件接受父 ...
React中的组件通信——父传子、子传父、Context
0.认识组件间的通信在开发过程中,我们会经常遇到需要组件之间相互进行通信: 比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据 ...
【组件】Vue组件之间的通信父传子 | 子传父
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...

Vue中props传递参数（父传子）

父组件中

子组件中

props的驼峰命名法

Vue中props传递参数（父传子）相关推荐

最新文章

热门文章