Vue组件基础–简单了解vue组件
Vue组件是什么？
组件就像是提前做好的模具，使用时拿出来就行，可以重复调用，它跟普通的Vue有一样的属性：
1、data （数据存放）
2、computed（计算属性）
3、watch（监听属性）
4、methods（方法存放）
熟悉的人应该看出来了，组件并没有el属性，组件没有根节点相关的属性。
组件的data必须是一个函数，这样多个组件才不会相互影响。
data: function () { return { count: 0 } }
组件可以通过Prop 对子组件进行传值，可以使用v-bind动态传递prop的数据
<div id="app"> <my-p v-for="item in list" :title="item.title"><!-- 使用v-bind(:)动态传递prop --> </my-p> </div>
Vue.component('my-p',{ props:['title'], //props向子组件传递数据 template:'<p>{{title}}</p>' }) new Vue({ el:"#app", data:{ list:[ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ] } })
组件的监听子组件事件
主要通过子组件的 $emit 方法并传入事件名触发事件
emit可以使用第二个参数向上抛值，监听的父组件通过event获取
<div id="app"> <div :style="{fontSize:size + 'px'}"> <!-- 字体大小通过size动态获取 --> <my-p v-for="item in list" :title="item.title" @addsize="size += $event"> <!-- $event获取子组件通过$emit抛的值 --> </my-p> </div> </div>
Vue.component('my-p',{ props:['title'], //props向子组件传递数据 template:`<div> <p>{{title}}</p> <button @click="$emit('addsize',10)">点击放大</button> </div>` //子组件通过 $emit 方法并传入事件名触发事件 //$emit可以使用第二个参数向上抛值，监听的父组件通过$event获取 }) new Vue({ el:"#app", data:{ list:[ { id: 1, title: '这是第一个' }, { id: 2, title: '这是第二个' }, { id: 3, title: '这是第三个' } ], size:14 } })
组件中v-model的实现
当input事件触发时,通过$emit对数据进行抛出
<div id="app"> <!-- 组件中v-model的使用 --> <my-input v-model="myText"></my-input> <p>{{myText}}</p> </div>
Vue.component('my-input', { props: ['value'],//通过props动态数据传递 template: ` <input :value="value" @input="$emit('input', $event.target.value)" > ` // input事件触发时,通过$emit对数据进行抛出 }) new Vue({ el:"#app", data:{ myText:'' } })
动态组件
通过:is实现tab切换效果
<div id="app"> <button v-for="item in list" @click="currList = item">{{item}}</button> <!-- 通过点击的item给currList赋值 --> <component :is="curr"></component> <!-- 通过:is="curr"的curr值进行组件的切换 --> </div>
Vue.component("my-div", { template: "<div>Home component</div>" }); Vue.component("my-div2", { template: "<div>Posts component</div>" }); new Vue({ el:"#app", data:{ list:['div','div2'], currList:'div' }, computed:{ curr: function() { return "my-" + this.currList; //修改组件的curr值改变组件的显示 } } })
