Vue之父传子，清晰易懂。

props之数据验证

验证的类型可以是：
String，Number，Boolean，Object，Array，Function

props:{props1:Number,  //必须是数值类型props2:[String,Number],  // 数字类型 || 字符串props3:{type:Number,  // 数值型   true为必传required: true
},
props4:{type:Boolean,  // 布尔值  default默认为truedefault: true
},
props5:{
type: Array,  // 如果是数组 || 对象 默认值必须是一个函数返回
default:function{return [];
}
}
}

好了，我们开始进入主题吧!

父组件如下：

<template>
<div>
<input type="text"  v-model="msg">  <!-- v-model双向绑定 -->
<son :datas=msg></son> <!-- 子组件通过datas接收msg数据 -->
</div>
</template>
<script>
import  son from  '引入子组件';
export default {
component:{ son }, // 注册组件
data(){return{msg:'我是父组件数据'
}
}
}
</script>

子组件如下：

<template>
<div>
{{datas}}   <!--这里就可以传过来的显示数据了-->
</div>
</template>
<script>
data(){props:{datas:{       // 这里的datas用于接收type:String,   // 我们接收验证的是字符串 也可以验证别的类型
}
}
}
</script>

Vue之父传子，清晰易懂。相关推荐

vue中父传子，父传孙说明
先来说一下,vue中父传往子组件用v-bind绑定属性,在子页面用props接收,子传往父的用$emit this.$emit('change',data),data就是你要传的数据,change为父 ...
vue的父传子与子传父
父传子在父组件定义数据 const ShuJu = reactive({one:'Basic 基础组件',two:'配置组件',there:'Form 表单组件',foru:'Data 数据展示', ...
【VUE】父传子、子传父
[父传子] 父组件:parent.vue<template><button @click="doClick">点击传值给子组件</button> ...
VUE的父传子子传父
1.父传子首先先在子组件里写入这个左边是子组件要写的东西右边是你要传的东西(最好是data里面的)注意加:符号然后在子组件的props里放入你要使用的数据注意要写上类型然后data里面不能 ...
vue组件,父传子、子传父、父调子、子调父简单理解总结
总结目录方法总结子组件获取父组件变量(也可用父组件调用子组件中的方法传值) 父组件获取子组件变量(介绍两种方法) 父组件调用子组件中的方法子组件调用父组件中方法(介绍两种方法) 方法总结 vue ...
vue组件父传子参数，参数还没赋值完成就被传递，传递了空参数
1.父组件传给子组件在子组件里定义一个props,即props:['msg'],msg可以是对象也可以是基本数据类型, 也可定义一个默认值,即 props:{msg: {type: String, ...
Vue项目实战01: vue里父传子传事件(easy)
vue中的组件通信相信小伙伴们已经达到炉火纯青的地步了提到vue里父子组件通信脑子里第一个想到的是不是使用$emit来传递. 实现肯定是能实现的下面我们一起看一下一种简单的方法父组件: 在父 ...
vue element 父传子,第一次传不过去
父页面:A 子组件:B 子组件方法:init 传值:id 相关代码描述: 进入A界面,点击调用按钮,调用B组件里的方法init()(B组件相当于是一个弹窗), 引用B组件代码 A界面调用B组件inti ...
VUE3 子传父父传子双向传递
组件参数传递父传子 father.vue <template > <!-- 父传子实现 2.向vue页面中的子组件传递该属性 :传给子组件的名字(自定义)="对应定义在父 ...

Vue之父传子，清晰易懂。

props之数据验证

Vue之父传子，清晰易懂。相关推荐

最新文章

热门文章