一分钟搞定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有两种格式
- props: [‘arr’] 数组
- props: { } 对象
props:{ } 详解
作用: 对象形式 指定验证要求
让我们先使用一下我在详细介绍
/子组件代码
<script>
export default {
props: {
//对象格式props
arr:{
//arr 父组件自定义属性名
type