Vue传值

导入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"
	}