vue组件通信---父传子(props方式)

zyy_wx

已于 2024-05-11 09:57:47 修改

阅读量1.2k

点赞数

文章标签： vue.js 前端 javascript

于 2022-09-24 22:27:02 首次发布

本文链接：https://blog.csdn.net/zyy_wx/article/details/127031504

版权

本文详细介绍了Vue.js中父组件如何通过props向子组件传递数据，强调了props的单向数据流特性，并展示了四种不同的props接收方式：数组、字符串、对象定义类型及默认值，以及数组形式接收默认值。通过实例代码展示了props在父子组件间的通信过程。

摘要由CSDN通过智能技术生成

描述：

父组件通过props属性给子组件通信

props具有单向下行绑定，由父组件传递给子组件（子组件中不允许直接修改props数据）

props接收的几种写法：

1.直接以数组方式接收

props: ['childContent']

2.明确以字符串类型接收

props: {
    childContent: String
}

3.以对象形式接收，明确接收类型，并使用默认值

props: {
    childContent: {
        type: String,
        default: '我是默认内容'
    }
}

4.以数组形式接收

 props: {
    minetlist: {
      type: Array,
      default: function () {
        return []
      }
    }
  }

代码演示

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

 <template>
   <div class="parent">
     <son :famsg="msg"></son> //子组件绑定famsg变量
   </div>
 </template>
 <script>
 import son from './son' //引入子组件
 export default {
   name: 'parent',
   components:{son},     //使用子组件
   data () {
     return {
       msg: '父组件',
     }
   },
 }
 </script>

2 . 子组件son代码如下：

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