**
首先我们准备一个父组件模板
————-
**
1
2
3
4
5
6
<template>
<template>
<div id=”app”>
<!– 使用子组件 –>
<!– 向子组件传值 需要在父组件中使用v-bind绑定一个名字 :outdata=”arr” 其中outdata这个名字是
你子组件中props属性接收数据时的名字 –>
<three :outdata=”arr”/>
</div>
</template>
<script>
//引入子组件
import three from ‘./components/three’
export default {
//全局注册组件
components:{
three
},
data(){
return {
arr:[1,2,3,4,5] //父组件的数据
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
子组件模板
<template>
<div class=”three”>
<h1>我是子组件</h1>
<!– 它俩都能得到 –>
{
{ items }}
<br>
{
{ outdata }}
</div>
</template>
<script>
export default {
// 第一种写法：不推荐
// props:[‘outdata’],
// 第二种写法 推荐 需要注意传值 和传引用的default 写法区别
// js中 object 和 Array 属于传引用 ,default 需要返回一个工厂函数的写法
// 传值：Number String Boolean 类型 default: 0||”||false 写法
// 当props中的数据类型验证失败时，在开发版本下 在控制台会报警告
props:{
outdata:{
type:Array,//类型也可以是多样 比如：String||Number
required:true,
default:()=>{
return [];
}
}
},
data(){
return{
items:this.outdata,// 也可以在这里接收
}
}
}
</script>
转载于:https://my.oschina.net/u/3371661/blog/3000018
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/101181.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
