准备子组件，动态配置子组件数据
<template> | |
<div id="app"> | |
<student name="小明" age="15"></student> | |
</div> | |
</template> | |
<script> | |
import student from './components/student.vue' | |
export default { | |
name: 'app', | |
components: { | |
student, | |
} | |
} | |
</script> |
在子组件 student 中使用 props 接收数据，
<template> | |
<div> | |
<h1></h1> | |
<h2>学生名称：</h2> | |
<h2>学生年龄：</h2> | |
</div> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
msg: '我是一个学生', | |
} | |
}, | |
props: ['name', 'age'] | |
} | |
</script> |
页面效果
在 student 子组件，打印 this，
props 配置的另外一种写法：
接收数据的同时对数据进行类型限制
<template> | |
<div> | |
<h1></h1> | |
<h2>学生名称：</h2> | |
<h2>学生年龄：</h2> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: 'Student', | |
props: { | |
name: String, | |
age: Number | |
}, | |
data() { | |
return { | |
msg: '我是一个学生', | |
} | |
}, | |
} | |
</script> |
在接收数据时，限制接收数据的类型，如果与接收数据的类型不同，则控制台提示报错。
props 的第三种写法：
接收数据的同时对数据进行类型限制 + 默认值的指定 + 必要性的限制
<template> | |
<div> | |
<h1></h1> | |
<h2>学生名称：</h2> | |
<h2>学生年龄：</h2> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: 'Student', | |
props: { | |
name: { | |
type: String, //name 的类型 | |
required: true, //name 是必要 | |
}, | |
age: { | |
type: Number, //age 的类型 | |
default: 100 //age 的默认值 | |
} | |
}, | |
data() { | |
return { | |
msg: '我是一个学生', | |
} | |
}, | |
} | |
</script> |
接收到数据不允许进行修改，添加按钮对接收到的年龄进行修改测试
<template> | |
<div> | |
<h1></h1> | |
<h2>学生名称：</h2> | |
<h2>学生年龄：</h2> | |
<button @click="update">修改接收数据</button> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: 'Student', | |
props: { | |
name: { | |
type: String, //name 的类型 | |
required: true, //name 是必要 | |
}, | |
age: { | |
type: Number, //age 的类型 | |
default: 100 //age 的默认值 | |
} | |
}, | |
data() { | |
return { | |
msg: '我是一个学生', | |
} | |
}, | |
methods: { | |
update() { | |
this.age = 22; | |
} | |
}, | |
} | |
</script> |
点击控制台报错，如图。但是页面数据进行了更新。
如果在 data 中再定义一个 name，控制台会报错如图
