VUE----组件通信（props）

配置项props

功能: 让组件接收外部传过来的数据
    1.传递数据:
        <demo name="xxxx"/>
    2.接收数据:
        第一种方式(只接收):
            props:['name']

        第二种方法(限制类型)
            props:{
                name:Number
            }
        第三种方法(限制类型、限制必要性、指定默认值)
            props:{
                name:{
                    type:String, //类型
                    required:true, //必要性
                    default:'老王' //默认值
                }
            }

备注: props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,
        若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中
        的数据
props适用于:
        1.父组件 ==> 子组件 通信
        2.子组件 ==> 父组件 通信 (要求父先给子一个函数)

父组件向子组件传值

App.vue

<template>
  <div>
    <Student name="李四" sex="女" :age="18"  :updateMsg="updateMsg"/>
    <Student name="王老五" sex="男" :age="19" :updateMsg="updateMsg"/>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
// 引入School组件
import Student from './components/Student.vue'
export default {
  name:'App',
  components:{Student},
  data(){
    return{
      msg:0,
    }
  },
  methods:{
    updateMsg(){
      this.msg+=1
    }
  }
}

</script>

Student.vue

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名: {{name}}</h2>
    <h2>学生性别: {{sex}}</h2>
    <h2>学生年龄: {{myAge+1}}</h2>

    <button @click="update">尝试修改收到的年龄</button>
    <button @click="updateToMsg">修改msg数据</button>
  </div>
</template>

<script>
export default {
  name:'Student',
  data () {
    return {
      msg:'一个叫张三的人',
      myAge:this.age
    };
  },
  // 简单声明接收
  // props:['name','age','sex',updateMsg]
  // 接收的同时对数据进行类型限制
  // props:{
  //   name:String,
  //   age:Number,
  //   sex:String,
  //   updateMsg:Function,
  // }
  // 接收的同时对数据:进行类型限制+默认值的指定+必要值的限制
  props:{
    name:{
      type:String, //name的类型是字符串
      required:true // name是必须的
    },
    age:{
      type:Number,
      default:99 // 默认值
    },
    sex:{
      type:String,
      required:true
    },
    updateMsg:{
      type:Function,
    }
  },
  methods:{
    update(){
      this.myAge++
    },
    updateToMsg(){
      this.updateMsg()
    }
  }
}

</script>

子组件向父组件传值

Student.vue

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名: {{name}}</h2>
    <h2>学生性别: {{sex}}</h2>
    <h2>学生年龄: {{myAge+1}}</h2>

    <button @click="update">尝试修改收到的年龄</button>
    <button @click="updateToMsg">修改父组件的数据msg</button>
    <button @click="changeSon">子组件向父组件传值</button>
  </div>
</template>

<script>
export default {
  name:'Student',
  data () {
    return {
      msg:'一个叫张三的人',
      myAge:this.age
    };
  },
  // 简单声明接收
  // props:['name','age','sex',updateMsg]
  // 接收的同时对数据进行类型限制
  // props:{
  //   name:String,
  //   age:Number,
  //   sex:String,
  //   updateMsg:Function,
  // }
  // 接收的同时对数据:进行类型限制+默认值的指定+必要值的限制
  props:{
    name:{
      type:String, //name的类型是字符串
      required:true // name是必须的
    },
    age:{
      type:Number,
      default:99 // 默认值
    },
    sex:{
      type:String,
      required:true
    },
    updateMsg:{
      type:Function,
    }
  },
  methods:{
    update(){
      this.myAge++
    },
    updateToMsg(){
      this.updateMsg()
    },
    changeSon(){
      this.$emit('updateSon','子组件向父组件传值')
    },
  }
}

</script>

App.vue

<template>
  <div>
    <Student name="李四" sex="女" :age="18"  :updateMsg="updateMsg" @updateSon="updateSon"/>
    <Student name="王老五" sex="男" :age="19" :updateMsg="updateMsg" @updateSon="updateSon"/>
    <h1>被子组件修改的数据：{{msg}}</h1>
    <h1>接收子组件传来的数据：{{sonData}}</h1>
  </div>
</template>

<script>
// 引入School组件
import Student from './components/Student.vue'
export default {
  name:'App',
  components:{Student},
  data(){
    return{
      msg:0,
      sonData:'',
    }
  },
  methods:{
    updateMsg(){
      this.msg+=1
    },
    updateSon(e){
      //接收子组件传来的数据
      console.log(e)
      this.sonData=e
    }
  }
}

</script>