标签:Vue methods component Part8 template 组件 data
一、概念
什么是组件:
组件 就是将复杂的页面中重复的部分进行拆分 拆分成一块块可复用的小部分
组件的出现 拆分了Vue实例的代码量 能够以不同的组件来划分不同的功能模块
需要什么样的功能 调用对应的组件即可
组件化和模块化的区别:
- 模块化: 从代码逻辑的角度进行划分的
方便了代码的分层开发 保证了每个功能模块的职能单一 - 组件化: 从UI界面的角度进行划分的
使前端页面组件化 将界面拆分成小的部分 方便UI组件的重用
简单来说 组件化使得网页重复的代码内容更加简单 多个重复代码只需要一个即可
页面中需要展示几个 那么就渲染几次
二、创建组件
1、创建全局组件
全局组件 就是代码中所有的Vue实例都可以使用的组件
创建方式一:
使用Vue.extend
来创建全局Vue组件 返回组件的模板对象
语法:
Vue.extend({
template:"组件内容"
})
并使用Vue.component
将模板对象注册为一个有名称的组件
语法:
Vue.component("组件名称",Vue.extend创建的组件模板对象)
例:
<script>
// 使用Vue.extend来创建全局Vue组件 返回组件的模板对象
var component1=Vue.extend({
template:"<h3>我是组件</h3>" // 通过template属性 指定组件要展示的HTML结构
})
// 使用Vue.component将模板对象注册为一个有名称的组件
// Vue.component("组件名称",Vue.extend创建的组件模板对象)
Vue.component("myComponent",component1)
Vue.component("mycomponent",component1)
var vm=new Vue({
el:'#app',
data:{},
methods:{}
});
</script>
若要使用组件 直接将组件的名称以HTML标签的形式引入到页面中即可
注:组件注册的时候可以用驼峰命名 但在页面上不能用驼峰命名
组件名称若包含大写 那么在页面上须将大写字母转换为小写字母 并用短横杠进行连接
组件名称若不包含大写 那么直接引用即可
<div id="app">
<my-component></my-component>
<mycomponent></mycomponent>
</div>
将这两步合并为一步 就是:
Vue.component("myComponent",Vue.extend({
template:"<h3>我是组件</h3>"
}))
Vue.component的第一个参数是组件的名称 在页面中引用组件的时候就是以名称引用的
Vue.component的第二个参数是Vue.extend创建的组件 其中template属性就是组件的HTML内容
创建方式二:
<script>
Vue.component("myComponent",{
template:"<h3>我是组件</h3>"
})
var vm=new Vue({
el:'#app',
data:{},
methods:{}
});
</script>
值得注意的是:无论是哪种方式创建的组件 组件的template属性指向的模板内容 必须有且仅有唯一的一个根元素 否则会报错
比如:
Vue.component("myComponent",{
template:"<h3>我是组件</h3><span>111</span>"
})
如果这么写 会报错
得用一个标签包住 比如这样:
Vue.component("myComponent",{
template:"<div><h3>我是组件</h3><span>111</span></div>"
})
之后 在页面中的引用方式还是一样
将组件名称引入到页面中即可
<div id="app">
<my-component></my-component>
</div>
创建方式三:
该创建方式的好处是 有代码提示和高亮
该方式抽离了组件的模板结构
这种方式 在template里写组件内容的时候 并不直接写上HTML代码 而是写一个id:
<script>
Vue.component("myComponent",{
template:"#tmpl" // 指定模板内容的id 只能用id 不能用class
})
var vm=new Vue({
el:'#app',
data:{},
methods:{}
});
</script>
随后 在被Vue控制的标签外面使用<template>
标签来定义组件的HTML模板
该元素内的所有代码都属于模板代码结构
<template id="tmpl">
<!-- 同样要符合组件定义的规则 即:有且仅有唯一的根元素 -->
<div>
<div><h3>我是组件</h3><span>111</span></div>
</div>
</template>
<div id="app">
<!-- 将组件名称引入到页面中即可 -->
<my-component></my-component>
</div>
2、创建私有组件
全局组件能被所有Vue实例使用
私有组件只能被创建的那个Vue实例使用
<script>
var vm2=new Vue({
el:'#app2',
data:{},
methods:{},
components:{
// 定义实例内部的私有组件
login:{
template:"<h1>私有</h1>"
}
}
});
</script>
<div id="app2">
<!-- 将组件名称引入到页面中即可 -->
<login></login>
</div>
同样 私有组件的HTML代码也可以抽离:
<script>
var vm2=new Vue({
el:'#app2',
data:{},
methods:{},
components:{
// 定义实例内部的私有组件
login:{
template:"#tmpl2"
}
}
});
</script>
<template id="tmpl2">
<h1>私有</h1>
</template>
<div id="app2">
<!-- 将组件名称引入到页面中即可 -->
<login></login>
</div>
还有一种简写方式:
直接在components属性里写上组件的引用变量名
<script>
// 通过对象字面量的形式定义了一个组件模板对象
var login={
template:"<h1>登录</h1>"
};
var vm=new Vue({
el:'#app',
data:{},
methods:{},
components:{
login
}
});
</script>
其中:
components:{
login
}
默认就相当于:
components:{
login:login
}
组件名默认变成了和组件的引用变量名一致了
因此 在页面中引用该组件的时候 组件名须注意
<div id="app">
<login></login>
</div>
三、组件中的data和methods
组件内也可以有自己的data
但组件中的data不能是一个对象 必须为一个function 且返回值是一个对象
组件中的data中的数据使用方式和在Vue实例中的data数据使用方式完全一致
<script>
Vue.component("mycomponent",{
// 组件中的data中的数据使用方式和在Vue实例中的data数据使用方式完全一致
template:"<h1>全局组件 - {{msg}}</h1>",
// 组件内可以有自己的data
// 但组件中的data不能是一个对象 必须为一个function 且返回一个对象
data:function()
{
return {
msg:"component data"
};
}
})
var vm=new Vue({
el:'#app',
data:{},
methods:{}
});
</script>
<div id="app">
<mycomponent></mycomponent>
</div>
必须将data定义为一个返回对象的function的原因是:
若重复渲染了多个相同的组件 可确保每个组件内的data都是其独有的 不被其它组件所共享的
methods的定义方式和data一样 在组件实例中的methods属性里写方法即可
<script>
Vue.component("counter",{
template:"#tmpl",
data:function()
{
return {count:0};
},
methods:{
increment()
{
this.count++;
}
}
})
</script>
<template id=tmpl>
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
四、组件切换
有两种方式可实现组件的切换
1、v-if和v-else实现组件的切换
v-if 代表该参数的值为true
时 该组件为显示状态
v-else 代表该参数的值为false
时 该组件为显示状态
使用起来也是非常简单:
<script>
Vue.component("login",{
template:"<h3>登录</h3>"
})
Vue.component("register",{
template:"<h3>注册</h3>"
})
var vm=new Vue({
el:'#app',
data:{
flag:true
},
methods:{}
});
</script>
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
但 由于if和else的弊端
其缺陷就是只能控制两个组件之间的切换
Vue还提供了一种方式 可控制多个组件之间的切换:
2、component元素实现组件的切换
Vue提供了<component>
元素来展示对应名称的属性
component是一个占位符 :is
属性需要指定要展示的组件的名称
简单来说 :is属性的值是哪个组件的名称 那么显示的就是哪个组件
组件名称须用引号进行包裹 以此表明是一个字符串 否则Vue会认为这是一个表达式 然后进行解析
<div id="app">
<a href="" @click.prevent="componentName='login'">登录</a>
<a href="" @click.prevent="componentName='register'">注册</a>
<!-- Vue提供了component元素来展示对应名称的属性 -->
<!-- :is属性需要指定要展示的组件的名称 -->
<!-- 组件名称须用引号进行包裹 -->
<component :is="componentName"></component>
</div>
<script>
Vue.component("login",{
template:"<h3>登录</h3>"
})
Vue.component("register",{
template:"<h3>注册</h3>"
})
var vm=new Vue({
el:'#app',
data:{
// :is绑定的组件名称
componentName:'login'
},
methods:{}
});
</script>
五、组件切换动画
组件在切换的时候 也可实现动画效果 以提升用户体验
首先 用<transition>
标签包裹要添加动画的组件
<transition>
是Vue提供的一个组件 可以给元素和组件添加进入/离开过渡
然后 用mode
属性设置组件切换的动画模式 out-in代表先出再进入 in-out代表先进入再出
<div id="app">
<a href="" @click.prevent="componentName='login'">登录</a>
<a href="" @click.prevent="componentName='register'">注册</a>
<!-- 用transition标签进行包裹 -->
<!-- 用mode属性设置组件切换的动画模式 out-in代表先出再进入 in-out代表先进入再出 -->
<transition mode="out-in">
<component :is="componentName"></component>
</transition>
</div>
最后 设置动画样式即可:
<style>
.v-enter,
.v-leave-to
{
opacity:0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active
{
transition: all 0.5s ease;
}
</style>
标签:Vue,methods,component,Part8,template,组件,data 来源: https://blog.csdn.net/Piconjo/article/details/105651289
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。