<template>
<div>
<p>子组件</p>
<div class="hello">
<ul>
<li v-for="user in users"
:key="user">{{user}}</li>//将接收到的参数进行循环展示，注意:key的使用，如果设置了eslint没有设置key会报错
</ul>
</div>
</div>
</template>
<script>
export default {
name: ‘Son‘,
data () {
return {
}
},
props: {
users: { // 必须传值，并且返回的值是数组
type: Array,
required: true
}
}
}
</script>
关于props的定义
props: {
propA: Number,
propB: [String, Number],
propC: {
type: String,
required: true
},
propD: {
type: Number,
default: 101
},
propE: {
type: Object,
default: function() {
console.log("propE default invoked.");
return { message: "I am from propE." };
}
},
propF: {
isValid: function(value) {
return value > 100;
}
}
2、子传父
子元素
<template>
<div>
<p>子组件</p>
<p @click="changeTitle">{{title}}</p>//注册点击事件，点击之后改变父元素的值
</div>
</template>
<script>
export default {
name: ‘‘,
data () {
return {
title: ‘传参‘
}
},
methods: {
changeTitle () {
let data = {
num: 123
}
this.$emit(‘titleChanged‘, data)//可以定义内容，也可以直接传参
}
}
}
</script>
父元素
<template>
<div class="home">
<div id="app">
<users @changeTitle ="updateTitle"></users>
<!-- 与子组件changeTitle 自定义事件保持一致
updateTitle($event)接受传递过来的文字 -->
<h2>{{title}}</h2>
</div>
</div>
</template>
<script>
import Users from ‘@/components/Users.vue‘
export default {
name: ‘home‘,
data () {
return {
title: ‘传递的是一个值‘
}
},
components: {
‘users‘: Users
},
methods: {
updateTitle (e) {
console.log(e)
this.title = e.num
}
}
}
</script>
