06-Vue_组件
文章目录
-
- 一、创建组件
-
- 1.1 创建全局组件
-
- 1.1.1 第一种方式
- 1.1.2 第二种方式
- 1.2 创建私有组件
- 1.3 使用方式
- 二、组件中的 data 和 methods
- 三、组件切换
-
- 3.1 使用 v-if 和 v-else 配合进行切换
- 3.2 使用 \ 进行切换
- 四、props 传递数据
-
- 4.1 字面量语法
- 4.2 动态语法
- 4.3 绑定修饰符
- 4.4 props 验证
- 五、父子组件间的事件通信
-
- 5.1 $emit() 与 $on() 函数
- 六、非父子组件事件通信
-
- 6.1 父子组件访问
- 6.2 ref 获取DOM元素和组件
- 七、组件的应用
-
- 7.1 分页组件
- 7.2 购物车组件
一、创建组件
1.1 创建全局组件
- 注意：模板中有且只有一个根元素，就像一个网页只有一个根元素为
一样
1.1.1 第一种方式
-
使用 Vue.extend
var com1 = Vue.extend({ template: '第一种方式
' }); Vue.component('mycom1', com1); -
简写
Vue.component('mycom2', Vue.extend({ template: '第一种方式的简写
' })); -
最终简写
Vue.component('mycom3', { template: '第一种方式的最终简写
' });
1.1.2 第二种方式
-
在
中定义 HTML 结构<template id="template"> <div> <h2>第二种方式h2> <h3>好耶~h3> div> template> -
使用 Vue.component 中 template 属性 进行调用
Vue.component('mycom4', { template: '#template' });
1.2 创建私有组件
components: {
login: {
template: 'login 组件
'
}
},
1.3 使用方式
-
在HTML中直接用标签应用即可
<div id="app"> <mycom1>mycom1> <mycom2>mycom2> <mycom3>mycom3> <mycom4>mycom4> div> -
非驼峰命名法，则直接照着写就好了
-
驼峰命名法：定义时使用驼峰，使用时需要以 “ - ” 分隔
二、组件中的 data 和 methods
- data 定义方式不太一样，但是使用方式和实例中的 data 没什么太大区别
components: {
pirvateTem: {
template: 'private {
{msg}}
',
data: function() {
return {
msg: 'Template'
}
},
methods: {
... }
}
}
三、组件切换
3.1 使用 v-if 和 v-else 配合进行切换
<div id="app">
<a href="" @click.prevent="flag = true">登录a>
<a href="" @click.prevent="flag = false">注册a>
<transition mode="out-in">
<login v-if="flag">login>
<register v-else="flag">register>
transition>
div>
3.2 使用 进行切换
:is指定要显示的组件
<div id="app">
<a href="" @click.prevent="comName = 'login'">登录a>
<a href="" @click.prevent="comName = 'register'">注册a>
<component :is="comName">component>
div>
四、props 传递数据
- 作用：实现父子组件之间的数据通信
4.1 字面量语法
<div id="app">
<my-component my-msg="nbnbnb">my-component>
div>
<script>
Vue.component('my-component', {
template: '{
{ myMsg }}',
// props：声明待接收的父组件数据
props: ['myMsg']
})
var vm = new Vue({
el: '#app',
data: {
}
})
script>
注意：如果子组件接收驼峰式命名，则父组件需要使用短横线分割命名。
4.2 动态语法
-
使用 v-bind 指令，当父组件的数据发生改变时，会自动同步到子组件。
-
注意：由于 props 默认是单向绑定，即父组件的属性发生改变，子组件也会改变。反之则不会。
单向绑定情况下，若子组件修改了父组件的值，会报错如下：
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “data”
<div id="app">
<my-component :msg="message">my-component>
div>
<script>
Vue.component('my-component', {
template: '{
{ msg }}',
// props：声明待接收的父组件数据
props: ['msg']
})
var vm = new Vue({
el: '#app',
data: {
message: 'hhhh'
}
})
script>
4.3 绑定修饰符
<div id="app">
<my-component :msg="message">my-component>
<my-component :msg.sync="message">my-component>
<my-component :msg.once="message">my-component>
div>
- 注意：若传递引用类型，则无论哪种绑定类型，在子组件修改 props 都会影响父组件的状态。
4.4 props 验证
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return {
message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
五、父子组件间的事件通信
-
使用事件绑定机制，父组件向子组件传递方法，绑定后，子组件可以通过某些方式来调用传递过来的这个方法了
<son v-on:fun="show">son> -
在子组件中想办法调用到
$emit(event, arg)函数this.$emit('fun','哈哈哈');
5.1 $emit() 与 $on() 函数
- vm.$emit( event, arg ) // 触发当前实例上的事件
- vm.$on( event, fn ) // 监听 event 事件后运行 fn；
- 用法：
- 父组件可以使用 props 把数据传给子组件。
- 子组件可以使用 $emit 触发父组件的自定义事件。
六、非父子组件事件通信
参考资料：
https://www.jb51.net/article/114575.htm
https://www.cnblogs.com/chy18883701161/p/12616427.html
6.1 父子组件访问
- $parent：访问当前组件的父组件
- $root：访问当前主键的根组件
6.2 ref 获取DOM元素和组件
-
我们可以在元素上使用
ref属性，然后赋予一个优雅的名字<h3 ref="myh3">我是H3h3> <login ref="login">login> -
在实例中，我们通过
$refs来获取DOMgetElement() { console.log(this.$refs.myh3); console.log(this.$refs.login.$el.innerText); }
七、组件的应用
7.1 分页组件
<style>
.pagination {
display: flex;
list-style: none;
}
.page-item {
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border: 1px solid #ccc;
}
.page-item.active {
background-color: skyblue;
}
style>
<div id="app">
<page-component :total="total">page-component>
div>
<template id="page-component">
<ul class="pagination">
<li :class="p == page ? 'page-item active' : 'page-item'" v-for="p in pagecount">
<a href="#" class="page-link" @click.prevent="page = p">{
{ p }}a>
li>
ul>
template>
<script>
const pageComponent = {
template: '#page-component',
name: 'PageComponent',
props: ['total'],
data: function() {
return {
page: 1, // 当前页码
pagesize: 10 // 每页显示条数
}
},
computed: {
pagecount: function() {
// 总页码数
return Math.ceil(this.total / this.pagesize)
}
}
}
var vm = new Vue({
el: '#app',
data: {
total: 35
},
components: {
pageComponent
}
})
script>
7.2 购物车组件
<div id="app">
<div v-for="goods in goodslist">
<p>商品名称：{
{ goods.name }}p>
<p>单价：{
{ goods.price }}p>
<cart-component v-model="goods.count">cart-component>
<hr>
div>
<div>
订单总金额：{
{ amount }} 元
div>
div>
<template id="cart-component">
<div class="cart">
<button @click="count--; updateCount();">-button>
<input type="text" v-model="count" style="width: 50%;" @input="updateCount()">
<button @click="count++; updateCount();">+button>
div>
template>
<script>
const cartComponent = {
name: 'Cart',
template: '#cart-component',
// 在组件中不允许直接修改 props 中的数据
props: ['value'],
data: function() {
return {
count: this.value
}
},
methods: {
// v-model 指令双向数据绑定，修改父组件内容
updateCount: function() {
// 触发 input 事件
this.$emit('input', this.count)
}
}
}
const app = new Vue({
el: '#app',
data: {
goodslist: [
{
name: 'iphone 8 plus',
price: 5888,
count: 0
},
{
name: 'iphone x',
price: 7222,
count: 0
}
]
},
computed: {
// 当前订单总金额
amount: function() {
var money = 0;
this.goodslist.forEach(goods => {
money += parseInt(goods.count) * parseInt(goods.price)
})
return money;
}
},
components: {
cartComponent
}
})