Vue
传值
简单描述
父组件通过绑定自定义事件,接受子组件传递过来的参数
子组件通过$emit触发父组件上的自定义事件,发送参数
子传父具体实现步骤
1.父组件通过$on监听事件,事件处理函数的参数则为接收的数据
2.子组件通过$emit可以触发事件,
3.第一个参数为要触发的事件,第二个事件为要传递的数据
4.sync修饰符:对一个 prop 进行双向绑定
自定义事件
子组件需要以某种方式,例如点击事件的方法来触发一个自定义事件
将所需要传递的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
父组件 引入子组件–>注册子组件–>引用子组件
在子组件标签上绑定对自定事件的监听
总结
:在通信中,无论是子传父或父传子都是有中间介质。子传父的介质是自定义事件,父传子的介质是props中的属性。
代码演示
1.父组件parent代码如下:
父组件通过绑定自定义事件,接受子组件传递过来的参数
<template>
<div class="parent">
<h2>{{ msg }}</h2>
<p>父组件接手到的内容:{{ username }}</p>
<son psMsg="我是你爸爸" @transfer="getUser"></son>
<!-- 监听子组件触发的transfer事件,然后调用getUser方法 -->
</div>
</template>
<script>
import son from './Son'
export default {
name: 'HelloWorld',
data () {
return {
msg: '父组件',
username:'',
}
},
components:{son},
methods:{
getUser(msg){
this.username= msg
}
}
}
</script>
2.子组件son代码如下:
子组件通过$emit触发父组件上的自定义事件,发送参数
<template>
<div class="son">
<p>{{ sonMsg }}</p>
<p>子组件接收到内容:{{ psMsg }}</p>
<!--<input type="text" v-model="user" @change="setUser">-->
<button @click="setUser">传值</button>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
sonMsg:'子组件',
user:'子传父的内容'
}
},
props:['psMsg'],
methods:{
setUser:function(){
this.$emit('transfer',this.user)//触发transfer方法,this.user 为向父组件传递的数据
}
}
}
</script>