2021-11-07

最新推荐文章于 2022-09-20 16:28:09 发布

urnotbbq

最新推荐文章于 2022-09-20 16:28:09 发布

阅读量89

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45984446/article/details/121196078

版权

2021SC@SDUSC

智能研究中心快递柜学习笔记6

由于使用单一的状态树，应用的所有状态会集中到一个比较大的对象。当应用变得复杂时, store对象就有可能变得臃肿，为了解决这个问题, Vuex允许将store分割成模块module，而每个模块有自己的state, mutations, actions, getters等。

在store中新建一个模块文件

在store中的出口文件中引入模块

import Vue from 'vue'

import Vuex from 'vuex'



import app from './modules/app'

import user from './modules/user'

import permission from './modules/permission'

import enhance from './modules/enhance'

import getters from './getters'



Vue.use(Vuex)



export default new Vuex.Store({

  modules: {

    app,

    user,

    permission,

    enhance

  },

  state: {



  },

  mutations: {



  },

  actions: {



  },

  getters

})

模块中的getters参数及其可取到的值

①state：获取modules中的state数据

②getters：获取modules中的getters数据

③rootState：获取根部state数据

④rootGetters：获取根部getters数据

模块中的mutations参数及其可取到的值

①state：获取modules中的state数据

②getters：获取modules中的getters数据

③调用方法时传入的值

模块中的actions参数及其可取到的值

①commit：获取根部mutations

②dispatch：获取根部actions

③rootState：获取根部state,rootState.数据名称

④rootGetters：获取根部getters,rootState.数据名称

⑤state：获取modules中的getters

⑥getters：获取modules中的getters

组件中获取数据及方法的写法

（1）获取模块中state的数据

（2）获取模块中getters的数据

（3）获取模块中mutations或actions的方法

在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗

vue中标签属性若不用v-bind/：绑定，则输出为String类型
如： label=“true”//输出String
：label=“true”//输出Boolean

vue 模板必须有一个为根标签否则报错

正确示范：
<template>
 <div>
	<div></div>
	<a></a>
 </div>
</template>

el-container的子元素只能是el-header、el-footer、el-aside、el-main，反之其四的父元素也只能是el-container
el-container下使用div时div不会单独占据一行，会水平叠加排列，所以应该使用div作为父元素，div默认占满一行

template中需要有根标签，不能只有两个

要用div包着，换行不能用单引号，用反引号
驼峰式命名无效，html不区分大小写，要用-隔开，如my-com

最简格式

<body>
	<template id="temp">
	<div><a>asfsdf</a></div>
	</template>

	<div class="box">
		<my-com>
		</my-com>
	</div>
</body>

父子组件间传值
父组件传值给子组件：

子组件中定义props:['xxx']
父组件中：
<children :count="count"></children>
data{
	return{
	count:1,
	}
}

子组件传值给父组件：

子组件定义方法：
<button @click="sayLove"></button>
methods:{
	sayLove(){thie.$emit('sayLove','xxxxxxx')}//第一个参数是自定义事件名字，第二个参数是传递内容
}
父组件中：
<children :count="count" @sayLove="getLove"></children>
methods:{
	getLove(e){console.log(e)}
}

全局注册组件
在main.js中声明组件，即其他组件中也可以使用该组件

插槽的使用

具名插槽：
       子组件中：<slot name="xxx"></slot>
       父组件：<h2 slot="xxx">sdfsdf</h2>
       即将h2标签插入到子组件对应name="xxx"的位置
   不起名字：
       子组件中：<slot></slot>
       父组件：<children>
                   <p>234</p>
                   <h2>sdfsadf</h2>
               </children>
       所有子组件标签中的内容都默认放入到slot中

定义异步加载可以在用到某组件时再去加载，加快第一次登陆速度
const F00 = （） => import(’./component/Foo’)

定义组件的属性：

props: ['label']

</script>```

父子间中获取子组件内容：

mounted(){

this.数组 = this.$children

}