查看“Vue从入门到实战:使用Prop向子组件传递数据”的源代码
←
Vue从入门到实战:使用Prop向子组件传递数据
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
在使用组件时,给组件元素设置属性,组件内部如何接收呢 ? 首先需要在组件内部注册一些自定义的属性,称为prop <nowiki> Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' })</nowiki> 之后,在使用组件时,就可以通过属性向组件传递数据: <nowiki><blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post></nowiki> 在字符串模板中,不必必须使用kebab-case命名法(短横线分割命名),各种命名可以直接使用。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </head> <body> <div id="app"> <post-list></post-list> </div> <script> Vue.component('PostItem', { // 声明props props: ['postTitle'], // postTitle就像data中定义的数据属性一样, // 在该组件中可以像 "this.postTitle" 这样使用 template: '<h3>{{ postTitle }}</h3>' }); Vue.component('PostList', { data() { return { title: 'Vue.js无难事' } }, // 在字符串模板中可以直接使用PascalCase命名的组件名 // 和camelCase命名的prop名 template: '<div><PostItem :postTitle="title"></PostItem></div>' }); new Vue({ el: '#app' }) </script> </body> </html> </nowiki>
返回至
Vue从入门到实战:使用Prop向子组件传递数据
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息