Vue.js父子组件通信--父传子
程序员文章站
2022-06-28 18:52:56
父子组件通信-父传子一丶父子组件的通信二丶props数据验证三丶案例代码四丶运行结果——千磨万击还坚劲，任尔东西南北风——一丶父子组件的通信子组件是不能是不能引用父组件或者Vue实例的数据的在开发中，往往一些数据确实需要从上层传递到下层比如在一个页面中，我们从服务器请求到了很多数据其中一些数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示这个时候，并不会让子组件再次发送一个一次网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）如何进行父子组件间的通信呢...
父子组件通信-父传子
一丶父子组件的通信
- 子组件是不能是不能引用父组件或者Vue实例的数据的
- 在开发中，往往一些数据确实需要从上层传递到下层
- 比如在一个页面中，我们从服务器请求到了很多数据
- 其中一些数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示
- 这个时候，并不会让子组件再次发送一个一次网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）
- 如何进行父子组件间的通信呢？Vue官方提到
- 通过props向子组件传递数据
- 通过自定义事件向父组件发送消息
二丶props数据验证
- props可以是一个数组，也可以是对象
- 当需要对props进行类型验证时，就需要对象写法了
- 对象写法支持类型：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- 当我们有自定义构造函数时，验证也支持自定义类型
三丶案例代码
<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/26 8:48-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my_cpn :cmovies="movies" :cmessage="message"></my_cpn>
</div>
<template id="my_cpn">
<div>
<ul>
<li v-for="movie in cmovies">{{movie}}</li>
</ul>
<p>{{cmovies}}</p>
<p>{{cmessage}}</p>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const my_cpn ={
template:'#my_cpn',
// 传递数组
// props:['cmovies','cmessage'],
// 传递对象，控制传递类型的限制
// 传递对象，提供一些默认值
props:{
// cmovies:Array,
// cmessage:String,
cmessage:{
type: String, // 限制类型
default:"full", // 设置默认值,默认值在没有传值的情况下，会自动显示默认值
require:false // 如果为True，那么就是必传值，不传就会报错
},
cmovies:{
type:Array,
default(){
return []
}
}
},
data(){
return{
}
}
}
const app = new Vue({
el:"#app",
data:{
message:'hello',
movies:['海王','海贼王','海尔兄弟'],
},
components:{
my_cpn
}
})
</script>
</body>
</html>
四丶运行结果
——千磨万击还坚劲，任尔东西南北风——
本文地址：https://blog.csdn.net/weixin_43402353/article/details/110160175
上一篇： java面向对象 继承和多态
下一篇： 使用 CSS 实现盒子水平垂直居中的方法