一分钟搞定vue父子组件传值

一分钟搞定Vue父子组件传值

1.创建父子组件

创建子组件

创建父组件

页面展示

2.实现父传子

父组件执行

父组件 里的**子组件标签上 **设置 动态属性

代码如下

<isSon :arr="list"> </isSon>
//设置动态属性   传入 list 数组

子组件执行

子组件里设置 props属性接收父组件传过来的值

代码如下

<template>
  <div>
      //3.展示一下父组件传过来的数据
      展示:<span>{
  {arr}} </span>
    <button> 点击</button>
  </div>
</template>

<script>
export default {
  props: ['arr']
    //1.props用于接收父组件传过来的值
    //2.[ 数组里写得是字符串格式的父组件的动态属性名]
}
</script>

页面展示

这里强调一下 props有两种格式

1. props: [‘arr’] 数组
2. props: { } 对象

props:{ } 详解

作用: 对象形式 指定验证要求

让我们先使用一下我在详细介绍

/子组件代码
<script>
export default {
   
  props: {
     //对象格式props
      arr:{
   //arr  父组件自定义属性名
          type