props(父组件给子组件传属性值)

<template>
         <div>
             <h1>{{msg}}</h1>
             <h2>名字{{name}}</h2>
             <h2>性别{{sex}}</h2>
             <h2>年冷{{myage}}</h2>
             <button @click="change">修改</button>
             </div> 
</template>
<script>
export default {
    name:'Student',
      data(){
          console.log(this)
          return{
             msg:'我是一个学生',
             myage:this.age
          }
      },
      methods:{
          change(){
             this.myage++
          }
      },
      props:{
           name:{
               type:String,
               required:true
           },
           age:{
               type:Number
            //    require:true,
            // default:99
           },
           sex:{
                type:String,
                required:true
           }
      }
}
</script>
<style>
</style>

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <h2 v-text="mas" ref="title"></h2>
    <button ref="btn" @click="clickof">点我输出dom</button>
    <school></school>
    <student name="李四" :age="12" sex="nv"></student>
  </div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  data(){
    return {
      mas:"aaaa"
    }
  },
  components: {
    // HelloWorld
    School,
    Student
  },
  methods:{
    clickof(){
      console.log(this.$refs)
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>