vue--day38--props属性

vue 中 vue的ref 属性,主要用来共用组件，接收外部传过来的数据

 

1. App.vue

 

<template>

<div>

<!-- 发送方确定哪些属性 age="18" 传递的是字符串18 -->

<Student name="李四" sex="女" :age="18"/>

 

</div>

</template>

<script>

import Student from './components/Student.vue'

export default {

name: 'App',

components: {

Student

}

}

</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>

2. Student.vue

<template>

<div class="demo">

<h1>{{ msg }}</h1>

<h2>学生姓名{{name}}</h2>

<h2>学生性别{{sex}}</h2>

<h2>学生年龄{{myage+1}}</h2>

<button @click="updateAge">尝试修改收到的年龄</button>

</div>

</template>

<script>

export default {

name:"Student",

data() {

return {

msg:"我是学生呀",

// props 的优先级别比较高 先加载 props 在加载data

myage:this.age

 

};

},

methods: {

updateAge() {

this.myage++;

},

},

// 类似确认收款 接收到的 属性不呢能修改

//props:['name','sex','age'] , //简单声明接收

//接收的同时对数据 进行类型限制

// props:{

// name:String,

// age:Number,

// sex:String

// },

// 接收的同时对数据 进行类型现在+默认值的指定+必要性的限制

props:{

name:{

type:String,

required:true,

 

},

age:{

type:Number,

 

default:99

},

sex:{

type:String,

required:true,

 

},

}

}

</script>