vue2.0—父子通信

vue2.0—父子通信

构建项目和创建组件就不细说了，不懂的可以去官方文档API学习

VUE官方文档：https://cn.vuejs.org/v2/guide/

1）父传子

1. 创建组件home和child，并且在home中引入child组件

//home.vue
<template>
  <div id="home">
    <news1 :mesg="mesg"  ></news1>
  </div>
</template>
<script>
import news1 from  "../news1/news1"
export default {
   data(){
    return{
      mesg:1,
    }
   },
   components:{
      news1
   }
}
</script>

2. 在child.vue中拿到参数并进行渲染

//child.vue
<template>
  <div id="child">
    <p>我是父组件传给子组件的值:{{mesg}}</p>
  </div>
</template>
<script>
export default {
   props:{
      mesg:{
        type:Number
      }
   }
}
</script>

3.如果想要在子组件中改变父组件中传来的值，并且父组件的值也同时改变

• 1. 在父组件中给属性加上.sync修饰符，通过事件$emit（‘update:属性名’，属性值）

//home.vue
<news1 :mesg.sync="mesg" >

//child.vue
<template>
  <div id="child">
    <p>我是父组件传给子组件的值:{{mesg}}</p>
    <el-button type="primary" @click="change">改变父组件中的值</el-button>
</template>

<script>
export default {
   props:{
      mesg:{
        type:Number
      }
   },
   methods:{
        // 发送修改事件：update+要修改的属性+修改的值
     change(){
        this.$emit('update:mesg',100)
     }
   }
}
</script>

• 2. 在父组件中把属性包在一个对象里面

//home.vue
<template>
 <div id="home">
     <news1  :user="user"></news1>
 </div>
</template>
<script>
import news1 from  "../news1/news1"
export default {
  data(){
   return{
     user:{
       name:'tom'
     }
   }
  },
  components:{
     news1
  },
}
</script>

//child.vue
<template>
  <div id="news1">
    <p>我是父组件传给子组件的值:{{user.name}}</p>
   <el-button type="primary" @click="change2">改变父组件中的值</el-button>
  </div>
</template>
<script>
export default {
   props:{
      user:{
        type:Object
      }
   },

   created(){
    console.log(this.user)
   },
   methods:{
     change2(){
        this.user.name = "JAck"
     }
   }
}
</script>

2）子传父

1.在子组件中通过触发事件，向父组件$emit('事件'，参数)；

//child.vue
<template>
  <div id="news1">
    <el-button type="primary" @click="send">向父组件传值</el-button>
  </div>
</template>

<script>
export default {
   data(){
    return{
      msg:'我是子组件发送给父组件的值'
    }
   },
   methods:{
     send(){
         this.$emit('send',this.msg)
     },
   
   }
}
</script>

2.在父组件中的子组件上监听该emit事件触发一个函数，得到传过来的参数

//home.vue
<template>
  <div id="news">
    <news1 @send="send" ></news1>
  </div>
</template>

<script>
import news1 from  "../news1/news1"
export default {
   data(){
    return{
      msg:'',
    }
   },
   components:{
      news1
   },
   methods:{
    send(data){
        console.log(data)//得到子组件传过来的值
        this.msg = data;
    }
   }
}
</script>