Vue - props配置

props属性

作用：让组件接收外部传过来的数据。
传递数据方式：在组件标签上加入对应属性名与值。

//age属性传入的是字符串
<Demo name="hzc" age="20"><Demo>
//动态绑定后age传入的是Number类型的值
<Demo name="hzc" :age="20"><Demo>

接收数据方式：

方式一：
  props:['name','age']
方式二：
  props:{
    name:String,
    age:Number
  }
方式三
  props:{
    name:{
      type:String,
      required:true //是否必须传值
    },
    age:{
      type:Number,
      default:10  //默认值
    }
  }

注意：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警报。
举例：父组件接收子组件的信息。
思路：父组件给子组件传递函数。
App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Student :getMessage="getMessage"></Student> //将函数传递给子组件
  </div>
</template>

<script>
import Student from "@/components/Student";
export default {
  name: 'App',
  components: {
    Student
  },
  methods:{
    getMessage(msg){
      console.log(msg)
    }
  }
}
</script>

子组件Student.vue

<template>
  <div>
    <button @click="sendMessage">点击发送消息</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  props:['getMessage'],
  data(){
    return {
      msg:"hello"
    }
  },
  methods:{
    sendMessage(){
      this.getMessage(this.msg); //调用父组件传递过来的函数
    }
  }
}
</script>