父子组件之间的通信

父向子传值

1. 父组件绑定一个属性

//绑定title属性，且给title赋值
 <Sunny :title="msg"></Sunny>
 
//data里面给title属性赋值msg
 data () {
    return {
      msg:'父组件的title属性数据内容',
    }

2. 子组件用props接受这个属性

//拿到title属性并使用
 <p>{{this.title}}</p>

 //子组件用props接受title这个属性
 props:["title"]
 //或者写全props
 props:{
    title:{
    //数据类型：字符串为type:String，数组Array，对象Object
      type:String,
       //默认值
      default:"默认标题"
    },

---

子向父传值

1. 父组件绑定一个自定义事件

//父组件里面使用子组件，绑定一个自定义事件
<Sunny :title="msg" @clickHandler="clickFun"></Sunny>


methods:{
    //事件方法
    //父组件接受传过来的参数 a
   clickFun(a){
      console.log('button 1 click...',a)  //打印出来 a 的值是123
    }
  }

2. 子组件绑定一个点击事件，点击事件通过this.$emit来触发父组件绑定的自定义事件

//button绑定一个点击事件
<button @click="sunnyClickHandler">按钮</button >


methods:{
    sunnyClickHandler(){
      //this.$emit触发事件
      //调用到父组件中的方法clickHandler，可以传参给父组件
      return this.$emit("clickHandler",123)
    }
  }

---

以下为父子组件的全部代码！

父组件

下面展示一些 父组件代码。

<template>
  <div class="hello">
    <p>在Hello World 组件中</p>

    <Sunny :title="msg" :imgUrl="imagesUrl" :btnText="buttonText" @clickHandler="clickFun"></Sunny>
    <Sunny :title="msg2" :imgUrl="imagesUrl2" :btnText="buttonText2" @clickHandler="clickFun2"></Sunny>
    <Sunny :items="lessons"></Sunny>

  </div>
</template>

<script>
import Sunny from "./Sunny"
export default {
  name: 'HelloWorld',
  components:{Sunny},
  data () {
    return {
      msg:'父组件的msg属性数据内容',
      imagesUrl:require("../assets/sunny.png"),
      buttonText:'按钮1',
      msg2:'我是标题',
      imagesUrl2:require("../assets/sunny.png"),
      buttonText2:'按钮2',
      lessons:[
        {"id":1,"name":"java"},
        {"id":2,"name":"c"},
        {"id":3,"name":"sql"}
      ]
    }
  },
  methods:{
    clickFun(a){
      console.log('button 1 click...',a)
    },
    clickFun2(){
      console.log("button 2 click...")
    }
  }
}
</script>

子组件

下面展示一些 子组件代码。

<template>
  <div class="hello">
    <P>Sunny Component</P>
    <div class="session">
      <img :src="this.imgUrl" class="iconStyle item">
      <p class="item">{{this.title}}</p>
      <div class="btnClass item" @click="sunnyClickHandler">{{btnText}}</div>
    </div>

    <ul>
      <li v-for="item in items" :key="item.id">{{item.id}}----{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Sunny',
  // data () {
  //   return {
  //     title:"默认title",
  //     imgUrl:require("../assets/sunny.png"),
  //     btnText:"默认按钮"
  //   }
  // },

  //定义props接受父组件的属性
  // props:["title","imgUrl","btnText"],

  props:{
    title:{
      type:String,
      default:"默认标题"
    },
    imgUrl:{
      type:String,
      default:require("../assets/sunny.png")
    },
    btnText:{
      type:String,
      default:"默认按钮"
    },
    items:{
        //数据类型：数组Array，对象Object
      type:Array,
        //默认值
      // default:[]
        default:()=>{
            return []
        }
    }
  },
  methods:{
    sunnyClickHandler(){
      //调用到父组件中的方法
      return this.$emit("clickHandler",123)
    }
  }
}
</script>