Student.vue文件
<template>
<div class="student">
<h2>学生姓名:{{msg.name}}</h2>
<h2>学生年龄:{{age}}</h2>
<h2>学生性别:{{gender}}</h2>
<h2>学生学号:{{stuId}}</h2>
<h2>要修改的myAge{{myAge+1}}</h2>
<button @click="updateMyAge">点击修改myAge</button>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
msg: {
name:'张三',
},
myAge: this.age
}
},
methods: {
updateMyAge() {
this.myAge++;
}
},
// 接收到的props是不允许更改的
props: ['age','gender','stuId'],
//接收的同时对类型进行限制
// props: {
// age:Number,
// gender:String,
// stuId:String
// }
// props: {
// age: {
// type:Number,
// required:true
// },
// stuId: {
// type:String,
// required:true
// },
// gender: {
// type:String,
// default: '男'
// }
// }
}
</script>
<style>
.student {
background-color: orange;
}
</style>
App.vue文件
<template>
<div id="app">
<h1 v-text="msg" ref="title"></h1>
<button @click="showDom">点我输出上方DOM元素</button>
<School></School>
<Student :age="18" gender="女" stuId="B21044513"></Student>
</div>
</template>
<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
name: 'App',
components: {
School,
Student
},
data() {
return {
msg: '欢迎学习vuecli'
}
},
methods: {
showDom() {
console.log(this.$refs.title);
}
},
}
</script>
<style>
</style>