简单理解vue中Props属性
5星 · 超过95%的资源 143 浏览量
2020-09-01
08:56:48
上传
评论
收藏 51KB PDF 举报 
简单理解简单理解vue中中Props属性属性
主要帮助大家简单的理解vue中Props属性,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家解析了vue中Props的属性，供大家参考，具体内容如下
使用 Props 传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给
子组件。
“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props：
Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg }}</span>'
})
然后向它传入一个普通字符串：
<child msg="hello!"></child>
举例
错误写法：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./vue.js"></script>
<meta charset="UTF-8">
<title>vue.js</title>
</head>
<body>
<pre>
//使用 props 传输资料予子组件
//props , data 重复名称会出现错误
</pre>
<div id="app1">
<child mssage="hello!"></child>
</div>
<script>
Vue.config.debug = true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
data: function() {
return {
mssage: 'boy'
}
}
});
var vm = new Vue({
el: '#app1'
})
</script>
</body>
</html>
正确写法：
<!DOCTYPE html>
<html lang="en">
<head>
weixin_38645373
- 粉丝: 3
- 资源: 958
最新资源
- 小型GPT模型：用300行PyTorch代码实现的小型GPT语言模型库
- ChartGPT工具：个增强视觉语言理解的工具，基于先进的大型语言模型
- 基于Spring、SpringMVC、MyBatis的在线云音乐网站,java项目 eclipse和idea都能打开运行 推
- qt项目：简单字处理软件
- 基于Prism7+Prism Unity RestSharp字体图标 动态主题文件xaml加载，搭建的一个WPF框架
- 双语对话模型：双语对话语言模型，一个基于大型预训练语言模型 GPT 的对话生成模型，用 GPT-2 进行微调，支持中文和英文
- word下相关操作的图标
- 基于51单片机的矿用瓦斯检测报警器-硬件设计本科毕业设计论文
- 2016腾讯移动游戏质量标准
- postgresql一直使用的稳定版
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页