Vue组件基础–简单了解vue组件


Vue组件基础–简单了解vue组件

Vue组件是什么?

组件就像是提前做好的模具,使用时拿出来就行,可以重复调用,它跟普通的Vue有一样的属性:

    data (数据存放)
    computed(计算属性)
    watch(监听属性)
    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使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值改变组件的显示
}
}
})

推荐阅读置顶文章

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Vue组件基础--简单了解vue组件

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Vue组件基础–简单了解vue组件
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏