导入vuex
a) 下载vuex
npm i vuex
// 或者
yarn add vuex
b) 新建store文件夹,在该文件夹下新建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 将vuex中的东西暴露出去
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
state:数据存放的位置
getters: 类似于Vue中的计算函数
mutations:只能调用在该对象中的方法修改state的值
actions: 用来实现异步方法的调用,比如定时器之类的
module: 将vuex进行模块化开发
在vuex中调用state中的数据
在vuex中使用commit调用actions中的方法
例子:
moutations: {
// 操作state中的数据
setCount(state) {
// 设置state中的数据
state.count++
}
}
父子组件传值 该方法即可以传值也可以传递方法
// 父组件
<子组件名 :自定义属性名="传递的变量" />
=========================================================
// 子组件接收
export default {
props: ['自定义属性名'],
data () {
return {
}
},
methods: {
}
}
=================================================
子向父组件传值
父组件:
<template>
<div>
父亲节点{{count}}
// 传递getChilden方法
<Childen v-on:父组件传递的方法名="父组件的方法"></Childen>
</div>
</template>
<script>
import Childen from './Childen'
export default {
data () {
return {
count: 0
}
},
methods: {
// 父组件中自定义的方法,用来接收子组件传递过来的值
getChilden (ccount) {
this.count = ccount
}
},
components: {
Childen
}
}
</script>
<style scoped lang="less">
</style>
子组件:
<template>
<div>
儿子节点{{ccount}}
<button @click="getParent">传递节点值</button>
</div>
</template>
<script>
export default {
data () {
return {
ccount: 10
}
},
methods: {
getParent () {
// 使用$emit调用父组件传递过来的方法,后面的参数即为函数的参数
this.$emit('父组件传递的方法名', 传递的参数)
}
}
}
</script>
<style scoped lang="less">
</style>
eventBus事件总线
使用 $emit
使用 $on
使用 $emit
1.在main.js中创建EventBus事件总线
// 为全局注册一个EventBus
Vue.prototype.$EventBus = new Vue()
2.使用$emit进行事件的上传
// 发送
this.$EventBus.$emit('aPass', '来自A页面的消息')
3.用$on对事件总线进行订阅
第一个参数为接收值的key
第二个参数以为接收的值为参数的回调函数
this.$EventBus.$on('aPass', ($) => {
this.msg = $
})
4.使用$off事件总线进行取消订阅
this.$EventBus.$off('aPass')
插槽
匿名插槽
子
<template>
<!-- 存放插槽的位置 --!>
<slot></slot>
</template>
父
<my-childen>
<template>
插入的插槽
</template>
</my-childen>
具名插槽
ps: slot与slot-scape已经被废弃现在使用v-slot进行替代
子
<template>
<!-- 存放插槽的位置 --!>
<slot name="box"></slot>
</template>
父
<my-childen>
<template v-solt:box>
插入的插槽
</template>
</my-childen>
作用域插槽
子
<slot name="tothis" :user="user">{{user.lastName}}</slot>
data () {
return {
user: {
msg: '1'
}
}
父
使用作用域插槽可以接收该插槽中传递过来的值
<my-childen>
<template v-slot:tothis="sProps">
{{slotProps.user.msg}}
</template>
</my-childen>
配置babel.config.js
module.exports = {
'presets': [
'@vue/app'
],
'plugins': [
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
}
vue代码片段
"Create vue template": {
"prefix": "vue",
"body": [
"<template>",
" <div>",
" </div>",
"</template>",
"<script>",
"export default {",
" data () {",
"\treturn {",
"\t}",
" },",
" methods: {",
" }",
"}",
"</script>",
"<style scoped lang=\"less\">",
"</style>"
],
"description": "Create vue template"
}