vue父子间传值

搭建项目：本项目使用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>

• 点赞 1
• 收藏
• 分享
• 文章举报