vue组件通信----子传父(超级详细)

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>