vue入门教程之-组件
Posted 大喇叭611
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue入门教程之-组件相关的知识,希望对你有一定的参考价值。
vue入门教程之-组件
欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-component
上一节我们讲了vue的属性、事件和双向绑定,今天我们来讲一下vue的组件component
1、为什么要用组件?
将一个页面的业务处理逻辑放在一起,处理和维护起来就会很复杂,不利于后续管理和扩展,这个时候就需要使用组件化来分门别类的管理逻辑·
2、全局组件
全局组件顾名思义,一次定义注册后Vue实例的作用范围内均可使用该组件
(1) html代码
<div id="app">
<com1></com1>
</div>
<div id="app2">
<com1></com1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//定义一个com1组件,该组件的定义必须要在vm实例的上面定义,如果放在最下面则会报错!!!
//该组件在app和app2实例范围内均有效
Vue.component(\'com1\',{
template:\'<p>我是组件</p>\'
})
var vm = new Vue({
el:"#app"
});
var vm2 = new Vue({
el:"#app2"
})
</script>
(2)运行结果如下图:
3、局部组件
局部组件顾名思义,只可在定义的Vue实例的作用范围内均可使用该组件
(1) html代码
<div id="app">
<com2></com2>
</div>
<!-- app2内不存在com2,此结果不会打印 -->
<div id="app2">
<com2</com2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
定义在vm实例内的components组件com2,作用域只在app内
var vm = new Vue({
el:"#app",
components:{
\'com2\':{
template:\'<p>我是局部组件</p>\'
}
}
});
</script>
(2)运行结果如下图:
4、通过Prop向子组件传递数据
组件增加props属性,组件新增属性传递给component的props达到传值的效果
(1) html代码
<div id="app">
<h3>所学的课程:</h3>
<!-- v-bind绑定course和index属性,传递给study-course的props属性传入template模板中 -->
<study-course v-for="(item,index) in courses" v-bind:course="item" v-bind:index="index"></study-course>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.component(\'study-course\',{
props:[\'index\',\'course\'],
template:\'<li>{{index+1}}-----{{course}}</li>\'
})
var vm = new Vue({
el:"#app",
data:{
//通过v-for传递给study-course在模板中进行解析
courses:[\'语文\',\'数学\',\'外语\']
}
});
</script>
(2)运行结果如下图:
5、新建template模板
在idea中添加vue的component组件,单独将组件定义在一个文件中,在复用界面进行调用
(1) idea中添加vue的插件
(2) 创建一个vue-component
(2) html代码,新建zujian.vue文件,就创建了一个my-temp的模板并注册
<template id="my-temp">
<p>我是单独的组件模板</p>
</template>
<script>
Vue.component(\'zujian\',{
template:\'#my-temp\'
})
</script>
<style scoped>
</style>
(2).vue文件需要通过npm运行,后面我们在单独讲运行方式
以上是关于vue入门教程之-组件的主要内容,如果未能解决你的问题,请参考以下文章