Vue组件(component方法注册组件和props属性实现组件之间传值)
Vue注册组件Vue.component,template模板,组件之间使用props属性传值(父传子),简单介绍
·
一、什么是组件
在Vue中,组件是构成页面中独立结构单元。(是封装的HTML)
本次主要学习Vue.component()方法注册组件API。
功能:自定义标签
优点:开发效率提高、可维护性、可重用
二、组件化和模块化
模块化:把一个复杂的事务分为多个模块,小模块之间自由组合协助完成事务。
组件化:把页面上个重用的UI结构封装成组件,可重用性高。
区别:模块化从代码逻辑出发,组件化从UI角度出发
三、组件的定义和使用
<div id="app">
<!-- 使用部分,以下组件做出来的三个按钮都有自己独立的count值-->
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
//定义部分,下一行中my-component可以是myConponent(驼峰命名)
Vue.component('my-component', {
data () {
return {
count: 0
}
},
template:'<button v-on:click="count++">被单击{{count}}次</button>'
})
var vm=new Vue({
el: '#app'
})
</script>
1、其中,为什么data中要写方法?
答:为了组件被使用时,数据相互独立。
2、局部注册组件
<div id="app">
<my-component></my-component>
</div>
<script>
var com1={
template:'<p>我是vm实例中的局部组件</p>'
}
var vm=new Vue({
el: '#app',
//注册局部组件
components:{myComponent: com1}
})
</script>
3、template模板
Vue提供了template标签来定义结构模板,优点:不容易出错,开发体验和效率提升。
<div id="app">
<p>{{title}}</p>
<my-component></my-component>
</div>
<!-- template模板 -->
<template id="tmp1">
<p>{{title}}</p>
</template>
<script>
//通过id将template模板与组件绑定
Vue.component('my-component',{
template: '#tmp1',
data(){
return{
title:'我是组件内的title'
}
}
})
var vm=new Vue({
el:'#app',
data:{
title:'我是vm实例的title'
}
})
</script>
4、props传值
组件与组件之间实现数据传递,需要借助工具(如:props属性)
props传值,父传子
<div id="app">
<my-parent name="title"></my-parent>
</div>
<script>
//父组件传递数据(props接收name值,而name值在父组件中)
Vue.component('my-parent',{
props:['name'],
template: '<div>我是父组件{{name}}</div>'
})
var vm=new Vue({
el: '#app'
})
</script>
当然props属性中定义的name值也可以与Vue中的data值进行绑定,
data数据变化,name也变化。
<div id="example">
<my-component v-bind:boxoffice="boxoffice"></my-component>
</div>
<script>
//传递动态Prop
Vue.component('my-component',{
props:['boxoffice'],
template: '<p>该电影票房已经达到了{{boxoffice}}亿元</p>'
})
var vm=new Vue({
el: '#example',
data:{
boxoffice:20
}
})
</script>
结合组件进行列表渲染
<div id="example">
<my-item :list="type"></my-item:list>
</div>
<script>
Vue.component('my-item',{
props:['list'],
template:'<ol>\
<li v-for="item in list">{{item}}</li>\
</ol>'
})
var vm=new Vue({
el: '#example',
data:{
type:['HTML','CSS','JavaScript']
}
})
</script>
v-bind省略冒号部分,可以直接绑定data中的数组
<div id="example">
<!-- v-bind:value=“”直接省略为v-bind=“”-->
<my-shop v-bind="shop"></my-shop>
</div>
<script>
Vue.component('my-shop',{
props:['name','price','number'],
template:'<div>\
<div>名称:{{name}}</div>\
<div>价格:{{price}}</div>\
<div>数量:{{number}}</div>\
</div>'
})
var vm=new Vue({
el: '#example',
data:{
shop:{
name:'华为P20',price:3000,number:10
}
}
})
</script>
调用组件的属性使用驼峰命名方式
<div id="example">
<!-- 注意:使用驼峰式命名的属性,在props中和template插值表达式中的命名需要全部小写! -->
<my-component myTitle="诗与远方"></my-component>
</div>
<script>
Vue.component('my-component',{
//调用组件的属性使用了驼峰命名方式,props属性命名全部小写
props:['mytitle'],
template:'<p>{{mytitle}}</p>'
})
var vm=new Vue({
el: '#example'
})
</script>
props中使用小驼峰的方式
<div id="example">
<my-component my-title="诗与远方"></my-component>
</div>
<script>
Vue.component('my-component',{
// 如果props中使用小驼峰的方式,那么调用组件需要用等价的短横线分隔命名方式
props:['myTitle'],
template:'<p>{{myTitle}}</p>'
})
var vm=new Vue({
el:'#example'
})
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)