Vue2后续笔记
插槽
默认插槽
不能直接给插槽写样式,因为会被替换掉,可以包起来,给外面的盒子样式
-
App.vue
<template> <div id="app"> <Category title="美食" :listDate="foods"> <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" /> </Category> <Category title="游戏"> <ul> <li v-for="(item, index) in games" :key="index">{ { item }}</li> </ul> </Category> <Category title="电影"> <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" ></video> </Category> </div> </template> <script> import Category from "./components/Category.vue"; export default { name: "App", components: { Category, }, data() { return { foods: ["火锅", "烧烤", "小龙虾", "牛排"], games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"], films: ["教父", "拆弹专家", "你好,李焕英", "功夫"], }; },
-
Category.vue
就是在子组件里面定义一个插槽,等着组件的使用者进行填充 ,父组件没填充则它会默认显示标签里面的内容
<template>
<div class="category">
<h3>{
{
title }}分类</h3>
<slot>我是默认值,当使用者没有传递具体结构时,我会出现</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
};
</script>
具名插槽
1.最新写法v-slot:footer,但是只能写在template上; 2.父组件里面是可以追加的,不会覆盖
v-slot:可以简写为#
<template>
<div id="app">
<Category title="美食" :listDate="foods">
<img
slot="center"
src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"
alt=""
/>
<a slot="footer" href="http://www.atguigu.com">更多美食</a>
</Category>
<Category title="游戏">
<ul slot="center">
<li v-for="(item, index) in games" :key="index">{
{
item }}</li>
</ul>
<div class="foot" slot="footer">
<a href="http://www.atguigu.com">单机游戏</a>
<a href="http://www.atguigu.com">网络游戏</a>
</div>
</Category>
<Category title="电影">
<video
slot="center"
controls
src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
></video>
<!-- 最新写法,但是只能用在template上 -->
//<template v-slot:footer>
<template #footer>
<div class="foot">
<a href="http://www.atguigu.com">经典</a>
<a href="http://www.atguigu.com">热门</a>
<a href="http://www.atguigu.com">推荐</a>
</div>
<!-- 是可以追加的,不会覆盖 -->
<h4>欢迎前来观影</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from "./components/Category.vue";
export default {
name: "App",
components: {
Category,
},
data() {
return {
foods: ["火锅", "烧烤", "小龙虾", "牛排"],
games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
films: ["教父", "拆弹专家", "你好,李焕英", "功夫"],
};
},
};
</script>
<style>
#app {
display: flex;
justify-content: space-around;
}
video {
width: 200px;
}
.foot {
display: flex;
justify-content: space-around;
}
h4 {
text-align: center;
}
</style>
<template>
<div class="category">
<h3>{
{
title }}分类</h3>
<!-- 就是定义一个插槽,等着组件的使用者进行填充 -->
<slot name="center">我是默认值,当使用者没有传递具体结构时,我会出现1</slot>
<slot name="footer">我是默认值,当使用者没有传递具体结构时,我会出现2</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
};
作用域插槽
1.就是以插槽的形式让父组件可以使用子组件的数据,2.父组件必须使用template包裹起来3.且接收过来的值用对象的形式包裹着
v-slot:default=“scoped” 可以简写成#default=“scoped” 或者 v-slot=“scoped”
父组件
<template>
<div id="app">
<Category title="游戏">
<template #Cat="atguigu">
<ul>
<li v-for="(g, index) in atguigu.games" :key="index">{
{
g }}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<!-- 解构赋值 -->
<template #Cat="{ games }">
<ol>
<li style="color: red" v-for="(g, index) in games" :key="index">
{
{
g }}
</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template #Cat="{ games }">
<h4 v-for="(g, index) in games" :key="index">{
{
g }}</h4>
</template>
</Category>
</div>
</template>
------------------------------------------------------------------------------------
子组件
<template>
<div class="category">
<h3>{
{
title }}分类</h3>
<slot name="Cat" :games="games"
>我是默认值,当使用者没有传递具体结构时,我会出现1</slot
>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
data() {
return {
games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
};
},
Vuex
import store from ‘./store’ ,import优先级>Vue.use
插件是要在main.js中引入
- npm i vuex@3.6.2 来安装较低的版本,不然会有一堆奇怪警告和报错,这是因为vuex4.0及以上的版本不兼容Vue2。
- 组件中读取vuex中的数据:
$store.state.sum
- 组件中修改vuex中的数据:
$store.dispatch('action中的方法名',数据)
或$store.commit('mutations中的方法名',数据)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X3a7pC7a-1670567274173)(D:\新的开始md\Vue\image\vuex.png)]
1.如果没啥逻辑,vc也是可以直接到mutations的
2.Vc是顾客,actions是服务员,Mutations是厨师
Vuex基本使用
Vuex管理的数据无法直接v-model数据双向绑定
<template>
<div class="box">
<h1>当前求和为:{
{
$store.state.sum }}</h1>
<select name="bd" v-model.number="n">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementOdd">当前和为奇数再加</button>
<button @click="incrementWait">等一等再加</button>
</div>
</template>
<script>
export default {
name: "Add",
data() {
return {
n: 1, //用户选择的数字
};
},
methods: {
increment() {
//不需要啥逻辑方法是可以直接commit调用mutations方法的
// this.$store.dispatch("jia", this.n);
this.$store.commit("JIA", this.n);
},
decrement(