vue教程2-组件化开发
2024-09-30 07:53:44
全局组件
<div id="app">
<cs1></cs1>
</div> <script> Vue.component('cs1',{
data(){return {count:0}},
template:'<button @click="count++">this is global component {{ count }}</button>'
}
) new Vue({
el: '#app',
}
)
</script>
#在组件开发中，data用data(）{}函数，如果用参数，会在不同组件之间混用。
#组件cs1会把<cs1></cs1>替换掉。
props
<div id="app">
<!-- cs1组件可以复用，每次创建一个vue实例 -->
<cs1 title="jdango入门"></cs1>
<cs1 title="python入门"></cs1>
<cs1 title="vue入门"></cs1>
</div> <script> Vue.component('cs1',{
// 父组件cs1的数据通过props传给子组件
// 子组件声明props
// 将title属性渲染到template中，然后替换父组件cs1
props:['title'],
template:'<h2>{{title}}</h2>'
}
) new Vue({
el: '#app',
}
)
</script>
动态props
<div id="app">
<!-- 在cs1父组件中，便利posts中的每个字典，然后用v-bind动态绑定 -->
<cs1
v-for='post in posts'
v-bind:title='post.title'
></cs1>
</div> <script> Vue.component('cs1',{
props:['title'],
template:'<h2>{{title}}</h2>'
}
) new Vue({
el: '#app',
data:{
posts:[
// 在实际应用中，以下内容可能是从api获取的一个嵌套字典的列表
{id:1,title:'jdango入门'},
{id:2,title:'vue获取api'},
{id:3,title:'python socket原理'},
]
}
}
)
</script>
局部组件
<div id="app">
<cs1
v-for='post in posts'
v-bind:key='post.id'
v-bind:title='post.title'
></cs1>
</div> <script> //创建一个局部组件，在vue中调用，只有这个vue实例可使用
var PostItem = {
props:['title'],
template:'<h2>{{title}}</h2>'
} new Vue({
el: '#app',
data:{
posts:[
{id:1,title:'jdango入门'},
{id:2,title:'vue获取api'},
{id:3,title:'python socket原理'},
]},
components:{'cs1':PostItem}
}
)
</script>
组件通信
props参数使父组件向子组件传递数据，如果要让子组件向父组件传递数据，就要用到emit
<body>
<div id="app">
<div>
<ul>
<!-- 第二步：子组件触发的@remove，然后触发根组件的removeItem方法 -->
<cs1 v-for='post in posts' :key='post.id' :title='post.title' @remove='removeItem'></cs1>
</ul>
</div>
</div> <script> // 创建一个局部组件，每个模板中有一个父组件传递过来的title，和一个触发remove方法的按钮
// 第一步：在remove方法中，会使用emit方法向父组件触发remove方法，并带上本实例的title参数
var PostItem = {
props:['title'],
template:`
<li>
<h2>现在开始学习：{{title}}</h2>
<button @click='remove'>remove</button>
</li>
`,
methods:{
remove(){
this.$emit('remove',this.title)
}
}
} new Vue({
el: '#app',
data:{
posts:[
{id:1,title:'jdango入门'},
{id:2,title:'vue获取api'},
{id:3,title:'python socket原理'},
],
},
components:{'cs1':PostItem},
methods:{
removeItem(titleText){
// 第三步：titleText是传递过来的参数，过滤掉this.posts中这个参数，然后实时同步到html中
this.posts = this.posts.filter(function(post) {
return post.title !== titleText
})
}
}
})
</script>
</body>
最新文章
- 网站文件系统发展&&分布式文件系统fastDFS
- Xcode真机测试could not find developer disk image解决方法
- (转C#中Enum用法小结)
- 网站地图sitemap.xml的格式
- Android 通知栏用法例子
- iPhone/iTouch免99美刀真机调试
- js秒数转换时分秒方法
- SQL Server Agent Job 中用Powershell将备份文件拷贝到AWS S3
- Annotation(注解)介绍
- .Net开发工程师工具箱
- 矩阵游戏|ZJOI2007|BZOJ1059|codevs1433|luoguP1129|二分图匹配|匈牙利算法|Elena
- Java设计模式（一）
- 【项目 · Wonderland】预则立 && 他山之石
- hdu 3660 Alice and Bob's Trip(树形DP)
- Save vtkMatrix4x4 to a file 保存到文件
- each遍历 的原理
- 2014年15款新评定的最佳PHP框架
- webpack 中文文档
- laravel数据迁移
- 使用Python快速查询所有指定匹配KEY的办法