1、父传子
传参页面
<template>
<div id="app">
<p>父组件</p>
<users :users="users"></users>//在父组件中显示子组件，将要传递的值绑定到子组件上
</div>
</template>
<script>
import Users from '@/components/Users.vue'//把子组件注册到父组件中
export default {
name: 'home',
data () {
return {
users: ['henry', 'bucky', 'emuly'] //要传递到子组件的值
}
},
components: {
'users': Users //对子组件进行挂载，可以不用重命名
}
}
</script>
接收参数页面
<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: { // 基础类型检测, null意味着任何类型都行 propA: Number, // 多种类型 propB: [String, Number], // 必传且是String 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>