说明
组件中的属性，不能是 key，否则会报错
修改 UserInfo.vue
<template>
<div id="app">
<div>昵称：{{name}}</div>
<div>性别：{{sex}}</div>
<div>年龄：{{age}}</div>
</div>
</template>
<script>
export default {
// data:function(){//这里不用data，所以注释掉
// return {
// name:'李雷',
// sex:'男',
// age:20
// }
// }
props:['name','sex','age','key']//关键：增加key
}
</script>
<style scoped>
#app{
border: red 1px solid;
}
</style>
修改 App.vue
静态方式传值，像自定义标签属性，代码如下：
<template>
<!-- 模板 -->
<div id="app">
关键：增加key属性
<user-info name="韩梅梅" sex="女" age="21" key='1'/>
</div>
</template>
<script>
//引入 UserInfo 组件
import UserInfo from './components/UserInfo'
export default {
name: 'App',
components: {
'user-info':UserInfo //注册局部组件
}
}
</script>
报错
报错如下：
"key" is a reserved attribute and cannot be used as component prop.