Vue2：组件进阶

最新推荐文章于 2024-01-11 11:20:56 发布

孤安先生

最新推荐文章于 2024-01-11 11:20:56 发布

阅读量760

点赞数

分类专栏：全栈开发学习日记 # 第八章：Vue2全家桶文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/qq_41952539/article/details/127858851

版权

全栈开发学习日记同时被 2 个专栏收录

79 篇文章 12 订阅

订阅专栏

第八章：Vue2全家桶

9 篇文章 1 订阅

订阅专栏

动态组件

在同一个挂载点，可以切换显示不同的组件。

使用方法：

使用内置组件 component，配合 is 属性。
切换时改变 is 属性的值。

内置组件 component，不需要注册组件，可以直接使用。

缺点：切换组件会频繁创建(created)和销毁(destroyed)。

<!-- 变量存储要变换的组件，切换时只需要修改变量的值即可 -->
<component :is="变量名"></component>

App.vue

<template>
  <div>
    <component :is="comName"></component>
    <!-- 点击按钮切换组件 -->
    <button @click="comName = 'A'">点击切换List</button>
    <button @click="comName = 'B'">点击切换More</button>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'
import userName from './components/userName.vue'

export default {
  data () {
    return {
      comName: 'UserInfo'
    }
  },
  components: {
    UserInfo,
    userName
  }
}
</script>

UserInfo.vue

<template>
    <div>
         用户名: <input type="text">
         密  码: <input type="password">
    </div>
</template>

<script>
export default {
   created () {
      console.log('UserName组件的created执行了');
   },
   destroyed () {
      console.log('UserName组件的destroyed执行了');
   }
}
</script>

userName.vue

<template>
   <div>
      姓名: <input type="text">
      人生格言: <textarea  cols="30" rows="10"></textarea>
   </div>
</template>

组件缓存

vue 内置组件 keep-alive ，解决切换组件频繁创建销毁。

使用<keep-alive> 组件包裹即可。

<template>
  <div>
    <!-- 解决频繁创建销毁 -->
    <keepAlive>
      <component :is="comName"></component>
    </keepAlive>
    <!-- 点击按钮切换组件 -->
    <button @click="comName = 'A'">点击切换List</button>
    <button @click="comName = 'B'">点击切换More</button>
  </div>
</template>

<script>
import A from './components/A.vue'
import B from './components/B.vue'

export default {
  data () {
    return {
      comName: 'A'
    }
  },
  components: {
    A,
    B
  }
}
</script>

组件激活和非激活

activated 和 deactivated，组件在使用时 activated 生效；组件未使用时 deactivated 生效。

UserName.vue

<template>
   <div>
      姓名: <input type="text">
      人生格言: <textarea  cols="30" rows="10"></textarea>
   </div>
</template>

<script>
export default {
     // 创建：使用keep-alive，只有在第一次创建时生效
     created () {
          console.log('UserName组件的created执行了');
     },
     // 销毁：使用keep-alive，销毁不生效
     destroyed () {
          console.log('UserName组件的destroyed执行了');
     },
     // 激活状态：当切换为该组件时生效
     activated () {
          console.log('UserName组件激活了');
     },
     // 失去激活状态：当切换别的组件时生效
     deactivated () {
          console.log('UserName组件未激活');
     }
}
</script>

组件插槽

用于不确定内容的时候，使用插槽。

匿名插槽

内置组件 slot 占位，使用组件时，使用 Pannel 夹着的地方，传入 slot 进行替换。

引入 views/UseSlot.vue 文件，替换 Pannel 内容。

views/UseSlot.vue 引入 Pannel.vue 文件，写 slot 用作占位。

App.vue

<template>
  <div>
    <UseSlot></UseSlot>
  </div>
</template>

<script>
import UseSlot from './views/UseSlot.vue'

export default {
  components: {
    UseSlot,
  }
}
</script>

SlotPannel.vue

<template>
  <div>
    <slot></slot>
	<slot></slot>
    <slot></slot>
  </div>
</template>

views/UseSlot.vue

<template>
  <div>
    <Pannel>内容1</Pannel>
    <Pannel>内容2</Pannel>
    <Pannel>内容3</Pannel>
  </div>
</template>

具名插槽

插槽默认内容：

给 slot 内添加的内容为默认内容。可以在 Pannel 中进行重新编写覆盖。

App.vue

<template>
  <div>
    <UseSlot></UseSlot>
  </div>
</template>

<script>
import UseSlot from './views/UseSlot.vue'

export default {
  components: {
    UseSlot,
  }
}
</script>

SlotPannel.vue

<template>
  <div>
    <slot name='title'>
      <h3>默认标题</h3>
    </slot>

    <slot name="content">
      <h3>默认内容</h3>
    </slot>
  </div>
</template>

views/UseSlot.vue

<template>
  <div>
    <!-- 默认内容 -->
    <Pannel></Pannel>

    <Pannel>
      <template #title>
        <h3>标题2</h3>
      </template>
      
      <template #content>
        <h3>内容2</h3>
      </template>
    </Pannel>
  </div>
</template>

<script>
import Pannel from '../components/SlotPannel.vue'

export default {
  components: {
    Pannel,
  }
}
</script>

作用域插槽

Pannel 中 #title=变量名，这里的变量名是 slot 上定义的所有属性。可以任意点出 slot 上的属性。

<!-- 语法格式 -->

<!-- SlotPannel.vue -->ddd
<template>
  <div>
    <slot name='title' :标识="数据变量">
      <h3>默认标题</h3>
    </slot>
  </div>
</template>

<!-- views/UseSlot.vue -->
<Pannel>
    <template #title="变量名">
		<h3>{{ 变量名.标识.属性 }}</h3>
	</template>
</Pannel>

App.vue

<template>
  <div>
    <UseSlot></UseSlot>
  </div>
</template>

<script>
import UseSlot from './views/UseSlot.vue'

export default {
  components: {
    UseSlot,
  }
}
</script>

UseSlot.vue

<template>
  <div>
    <Pannel>
      <template v-slot:title="score">
        <h3>{{ score.row.age }}</h3>
      </template>
      
      <template #content>
        <h3>内容1</h3>
      </template>
    </Pannel>

    <Pannel>
      <template #title="score">
        <h3>{{ score.row.name }}</h3>
      </template>
      
      <template #content>
        <h3>内容2</h3>
      </template>
    </Pannel>
  </div>
</template>

<script>
import Pannel from '../components/SlotPannel.vue'

export default {
  components: {
    Pannel,
  }
}
</script>

SlotPanner.vue

<template>
  <div>
    <slot name='title' :row="obj">
      <h3>默认标题</h3>
    </slot>

    <slot name="content">
      <h3>默认内容</h3>
    </slot>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isShow: false,
      obj: {
        name: "无名氏",
        age: 123
      }
    };
  },
}
</script>

自定义指令

当指令不能满足需求时，要自定义指令。

注册自定义指令

全局注册

// 语法格式：
Vue.directive('自定义指令名称', {
    // 页面dom生成，触发 inserted
  	//  el：真实dom
    inserted (el) {
		// 指令内容
    }
});

Vue.directive('gColor', {
    inserted (el) {
        el.style.color = '#f00';
    }
});

局部注册

<!-- 语法格式 -->
<script>
export default {
    directives: {
        自定义指令名称: {
            // el: 真实dom
            inserted(el) {
                指令内容...
            }
        },
    }
}
</script>

<template>
  <div>
    <!-- 调用自定义指令 -->
    <h3 v-Color> 标题 </h3>
  </div>
</template>

<script>
export default {
    directives: {
        Color: {
            inserted(el) {
                el.style.color = 'red'
            }
        },
    }
}
</script>

传值

inserted 参数

参数1：真实dom元素
参数2：对象，value 值是传递的参数。

update 参数（指令参数更改时触发）

参数1：真实dom元素
参数2：对象，更新后的参数。

v-Color="'red'" 解释

v-Color='red' 单引号是变量，，需要在 data 中定义。
v-Color="'red'" 使用单双引号交替，转为字符串。

<template>
  <div>
    <!-- 调用自定义指令 -->
    <h3 v-Color="'red'"> 标题1 </h3>
    <h4 v-Color="cr"> 标题2 </h4>
    <button @click="cr = #00f">点击更改颜色<button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            cr: '#00f',
        }
    },
    directives: {
        Color: {
            inserted(el, binding) {
                el.style.color = binding.value;
            },
            update (el, binding) {
                el.style.color = binding.value;
            }
        },
    }
}
</script>

案例：tabBar

App.vue

<template>
	<div>
		<MyHeader :title="headTitle"></MyHeader>
		<div class="main">
			<component :is="ListName">
			</component>
		</div>
		<MyFooter :list="tabList" @changeName="changeName"></MyFooter>
	</div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyTable from './components/MyTable.vue'
import MyFooter from "./components/MyFooter.vue";
import MyGoodsList from './MyGoodsList.vue'
import MyGoodsSearch from './MyGoodsSearch.vue'
import MyUserInfo from './MyUserInfo.vue'


export default {
	data() {
		return {
			headTitle: "TabBar案例",
			ListName: 'MyGoodsList',
			tabList: [
				{
					iconText: "icon-shangpinliebiao",
					text: "商品列表",
					componentName: "MyGoodsList",
				},
				{
					iconText: "icon-sousuo",
					text: "商品搜索",
					componentName: "MyGoodsSearch",
				},
				{
					iconText: "icon-user",
					text: "我的信息",
					componentName: "MyUserInfo",
				},
			],
		};
	},
	methods: {
		// 组件切换
		changeName (cName) {
			this.ListName = cName;
		},
	},
	components: {
		MyHeader,
		MyTable,
		MyFooter,
		MyGoodsList,
		MyGoodsSearch,
		MyUserInfo,
	},
};
</script>

<style lang="less" scoped>
.main {
	padding: 45px 0 50px;
}
</style>

MyHeader.vue

<template>
	<div class="my-header" :style="{ background, color }">{{ title }}</div>
</template>

<script>
export default {
	props: {
		title: {
			typeof: String,
			require: true,
		},
		background: String,
		color: {
			typeof: String,
			default: "#fff",
		},
	},
};
</script>

<style lang="less" scoped>
.my-header {
	height: 45px;
	line-height: 45px;
	text-align: center;
	background-color: #1d7bff;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}
</style>

MyFooter.vue

<template>
	<div class="my-tab-bar">
		<div class="tab-item"
         v-for="(v, i) in list" :key="i"
         :class="{ current: MyIndex == i }"
         @click="tabBtn(i)"
         >
			<!-- 图标 -->
			<span class="iconfont" :class="v.iconText"></span>
			<!-- 文字 -->
			<span>{{ v.text }}</span>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		list: {
			typeof: Array,
			require: true,
			// 自定义校验
			validator(value) {
        // console.log(value);
				if (value.length >= 2 && value.length <= 5) {
          return true;
        } else {
          console.error("数据源个数必须在2~5个之间");
        }
			},
		},
	},
  data () {
    return {
      MyIndex: 0,
    }
  },
  methods: {
    // 组件切换: 传递组件名字
    tabBtn (i) {
      this.MyIndex = i;
      this.$emit('changeName', this.list[i].componentName)
    }
  }
};
</script>

<style lang="less" scoped>
.my-tab-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50px;
	border-top: 1px solid #ccc;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: white;
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

.current {
	color: #1d7bff;
}
</style>

MyTable.vue（插槽模板）

<template>
	<table class="table table-bordered table-stripped">
		<!-- 表格标题区域 -->
		<thead>
			<tr>
				<slot name="title">
					<th>#</th>
					<th>商品名称</th>
					<th>价格</th>
					<th>标签</th>
					<th>操作</th>
				</slot>
			</tr>
		</thead>
		<!-- 表格主体区域 -->
		<tbody>
			<slot name="body" :list="list">
				<tr>
					<td>1</td>
					<td>商品</td>
					<td>998</td>
					<td>xxx</td>
					<td>xxx</td>
				</tr>
			</slot>
		</tbody>
	</table>
</template>

<script>
export default {
	name: "MyTable",
	data() {
		return {
			list: [],
		};
	},
	created() {
		this.$axios({
			url: "/api/goods",
			methods: "get",
		}).then((res) => {
			console.log(res.data.data);
			this.list = res.data.data;
		});
	},
};
</script>

<style scoped lang="less">
.my-goods-list {
	.badge {
		margin-right: 5px;
	}
}
</style>

MyGooldsList.vue

<template>
  <div>
    <MyTable>
      <template #title></template>

      <template #body="list">
        <tr v-for="(v, i) in list.list" :key="v.id">
          <td>{{ v.id }}</td>
          <td>{{ v.goods_name }}</td>
          <td>{{ v.goods_price }}</td>
          <td>
            <button type="button" class="btn btn-primary"
                    @click="v.inputVisible = true"
                    v-if="!v.inputVisible">
            +Tag
            </button>
            <input v-else class="form-control" type="text"
                   v-model.trim="v.inputValue"
                   v-focus
                   @keydown.enter="addTesk(v)">
            
            <span class="badge badge-warning"
                v-for="(item, i) in v.tags" :key="i">
              {{ item }}
            </span>
          </td>
          <td>
            <button class="btn btn-danger btn-sm"
                    @click="delFn(list, i)">
            删除
            </button>
          </td>
        </tr>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'

export default {
  data () {
    return {
      isShow: true,
    }
  },
  methods: {
    // 删除
    delFn (list,i) {
      list.list.splice(i, 1);
    },
    // 添加
    addTesk (item) {
      this.$nextTick(() => {
        this.$refs.input.focus();
      })

      if (item.inputValue) {
        item.tags.push(item.inputValue);
        item.inputVisible = false;
      } else {
        alert('输入不能为空');
      }
      item.inputValue = '';
    }
  },
  components: {
    MyTable,
  }
}
</script>