搭建项目：本项目使用vue-cli脚手架工具直接搭建
项目结构：
1. 父传子
在父组件调用自组件时，给子组件绑定自定义属性，在子组件中使用props接收，子组件内部直接当成属性使用
父组件调用子组件：
<Son title="hello world" value="test" :city="selectCity"/>
子组件接收：
props: ['title', 'value', "city"],
app.vue
<template>
<div id="app">
<h1>hello world</h1>
<Father/>
</div>
</template>
<script>
import Father from './components/Father'
export default {
components: {
Father
}
}
</script>
<style>
</style>
father.vue
<template>
<div class="father">
<h1>父组件</h1>
<!-- 点击相对应的button子组件中会有相对应的数据变化 -->
<nav>
<button v-for="(item, index) in cityList" :key="index"
@click="selectAction(item)">
{{item}}
</button>
</nav>
<!-- 父组件调用子组件，如果自定义属性是变量时，则需要 ：绑定属性 -->
<Son title="hello world" value="test" :city="selectCity"/>
</div>
</template>
<script>
import Son from './Son'
export default {
components: {
Son
},
data(){
return {
cityList: ['深圳', '广州', '上海'],
selectCity: ''
}
},
methods: {
selectAction(city){
console.log(city);
this.selectCity = city;
}
}
}
</script>
<style scoped>
.father{
border: 5px solid #ddd;
padding: 50px;
}
</style>
son.vue
<template>
<div class="son">
<h1>子组件</h1>
<p>{{title}}</p>
<p>{{value}}</p>
<!-- 根据父组件中传过来的City值的变化，以下的数据而变化 -->
<p>推荐你去玩：</p>
<ul>
<li v-for="(item, index) in map[city]" :key="index">
{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
// 子组件中使用props接收父组件传过来的值， props也是组件的属性，但是实例没有配置项，属于外部属性
props: ['title', 'value', "city"],
// 内部属性
data(){
return {
map: {
'上海': ['东方明珠', '外滩', '迪斯尼'],
'深圳': ['世界之窗', '欢乐谷', '千锋'],
'广州': ['长隆', '广州塔', '千锋']
}
}
}
}
</script>
<style scoped>
.son{
border: 5px solid #999;
padding: 50px;
}
</style>
2.子传父（两种方式）
- 在父组件调用子组件时，给子组件绑定自定义属性, 这个自定义属性是一个函数。
在子组件内部使用props接收。当需要传值给父组件时，就调用这个属性，通过调用函数传值给父组件。 - 在父组件调用子组件时，给子组件绑定自定义事件，事件的实现在父组件中，是一个函数。
当子组件需要传值给父组件时，就使用this.$emit()触发该事件，并传参进去，那么父组件的函数就可以接收到参数了。
第一种方式：
父组件调用子组件：
<Son :onSend="handleSendAction"/>
函数实现
//函数的实现，也就是传入子组件中的函数，参数为接收子组件传过来的值
handleSendAction(val){
console.log('触发了:', val);
this.arr.push(val);
}
}
子组件接收：
props: {
onSend: Function
},
子组件传值触发事件
<!-- 通过button按钮的click触发事件 -->
<button @click="btnAction">发送</button>
// 通过触发事件，触发父组件传过来的函数
btnAction(){
console.log(this.value);
// 调用父组件的属性，这个属性是一个函数，传入参数为子组件传过去的值
this.onSend(this.value);
}
father.vue
<template>
<div class="father">
<h1>父组件</h1>
<p>接收到了：</p>
<ul>
<li v-for="(item,index) in arr" :key="index">
{{item}}
</li>
</ul>
<!-- 父组件调用子组件，绑定一个函数属性，函数在methods中实现 -->
<Son :onSend="handleSendAction"/>
</div>
</template>
<script>
import Son from './Son'
export default {
components: {
Son
},
data(){
return {
arr: []
}
},
methods: {
//函数的实现，也就是传入子组件中的函数，参数为接收子组件传过来的值
handleSendAction(val){
console.log('触发了:', val);
this.arr.push(val);
}
}
}
</script>
<style scoped>
.father{
border: 5px solid #ddd;
padding: 50px;
}
</style>
son.vue
<template>
<div class="son">
<h1>子组件</h1>
<input type="text" v-model.lazy="value"/>
<!-- 通过button按钮的click触发事件 -->
<button @click="btnAction">发送</button>
</div>
</template>
<script>
export default {
//父组件接收，该值为一个函数类型
props: {
onSend: Function //确定该值为一个函数
},
data(){
return {
value: ''
}
},
methods: {
// 通过触发事件，触发父组件传过来的函数
btnAction(){
console.log(this.value);
// 调用父组件的属性，这个属性是一个函数，传入参数为子组件传过去的值
this.onSend(this.value);
}
}
}
</script>
<style scoped>
.son{
border: 5px solid #999;
padding: 50px;
}
</style>
第二中方式：
父组件调用子组件：
<Son @send="handleSendAction" />
函数实现：
handleSendAction(val, ...rest){
console.log('触发了:', val, rest);
this.arr.push(val);
}
子组件触发：
<button @click="btnAction">发送</button>
btnAction(){
console.log(this.value);
// 触发组件标签上的事件
// 自定义事件
// 参数1:自定义事件的名字
// 参数2:调用事件的参数
this.$emit('send', this.value, 1, 2, 3);
}
father.vue
<template>
<div class="father">
<h1>父组件</h1>
<p>接收到了：</p>
<ul>
<li v-for="(item,index) in arr" :key="index">
{{item}}
</li>
</ul>
<Son @send="handleSendAction" />
</div>
</template>
<script>
import Son from './Son'
export default {
components: {
Son
},
data(){
return {
arr: []
}
},
methods: {
handleSendAction(val, ...rest){
console.log('触发了:', val, rest);
this.arr.push(val);
}
}
}
</script>
<style scoped>
.father{
border: 5px solid #ddd;
padding: 50px;
}
</style>
son.vue
<template>
<div class="son">
<h1>子组件</h1>
<input type="text" v-model.lazy="value"/>
<button @click="btnAction">发送</button>
</div>
</template>
<script>
export default {
data(){
return {
value: ''
}
},
methods: {
btnAction(){
console.log(this.value);
// 触发组件标签上的事件
// 自定义事件
// 参数1:自定义事件的名字
// 参数2:调用事件的参数
this.$emit('send', this.value, 1, 2, 3);
}
}
}
</script>
<style scoped>
.son{
border: 5px solid #999;
padding: 50px;
}
</style>
