Vue传值 1.父传子 简单描述

父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）

实现步骤

1.子组件在props中创建一个属性，用于接收父组件传过来的值； 2.父组件 引入子组件–>注册子组件–>引用子组件； 3.在子组件标签中添加子组件props中创建的属性； 4.将所要传递的值赋值给该属性。

props接收的几种写法

1.直接使用 props 以一维数组的方式接收

props: ['childCom']

2.接收字符串

props: { childCom: String //这里指定了字符串类型，如果类型不一致会警告的哦 }

3.使用对象形式接收，并赋予默认值，但是在数组这里接收有问题，一个大坑，请看第四种

props: { childCom: { type: String, default: 'sichaoyun' } }

4.第三种写法：接收数组，是需要以函数形式接收

props: { minetlist: { type: Array, default: function () { return [] } } } 特别注意:

所有的prop都使得其父子prop形成一个单向数据流，即单向下数据流。父级prop的更新会单向流动到子组件中，但是反过来则不行，单向数据流能防止子组件意外改变父组件的状态。额外的，每次父组件发生改变时，子组件中的prop将会更新为最新的值。

代码演示

1 . 父组件parent.vue代码如下

<template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </template> <script> import son from './Son' //引入子组件 export default { name: 'HelloWorld', data () { return { msg: '父组件', } }, components:{son}, } </script>

2 . 子组件son代码如下：

<template> <div class="son"> <p>{{ sonMsg }}</p> <p>子组件接收到内容：{{ faMsg }}</p> </div> </template> <script> export default { name: "son", data(){ return { sonMsg:'子组件', } }, props:['faMsg'],//接收psMsg值 } </script>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。