vue组件传数据、minxin、vuex概述

最新推荐文章于 2024-05-28 11:44:38 发布

Coding Is Fun

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量719

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u010295555/article/details/123158923

版权

vue组件传递数据方式汇总

组件插槽

具名插槽

父组件

<ss  @toFOO="zidata=$event">
    <p slot="slot1">插槽2</p>
    <p slot="slot2">插槽3</p>
  </ss>

子组件

<slot name="slot1"></slot>
<slot name="slot2"></slot>

子组件定义时可以将数据绑定到具名插槽上，父组件通过slot-scope属性获取

老写法父组件中应用案例

<p slot="slot1" slot-scope="data">
     我是插槽1{{data.zi}}
</p>

新写法父组件中应用案例

#slot1 表示绑定子组件的插槽名

并在data变量中接收子组件zi变量名中的数据

<template #slot1="data">
 <p>插槽1{{data.zi}}</p>
</template>

父组件向子组件props传值

父组件中绑定属性名：data1和数据

子组件中使用props数组接收数据，props中的数据和data中定义的数据一样使用

默认数据是父组件单向向子组件绑定数据，

要想实现双向绑定需要在绑定的的数据中使用sync语法糖

：data1.sync='Foo'

//父组件
<template>
  
 <div>
  <p>111</p>
<!--       <HelloWorld :data1='Foo' style="color: red">搜索/</HelloWorld>-->
    <ss :data="Foo"></ss>
  
 </div>

  
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import ss from "@/components/ss";

export default {
  name: 'app',
  components: {
    HelloWorld,ss

  },
  data() {
   return {
    Foo:'父组件内容'
   }
  },
  
  
  
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件

<template>
<div>

<p>ss</p>
<p>{{data}}</p>
</div>
</template>

<script>
export default {
  name: "ss",
  props:['data']
}
</script>

<style scoped>

</style>

子组件触发父组件事件

一般用到子组件向付组件传值，都是由一些事件如点击提交等触发的，因此需要通过绑定相关事件的方式，触发

由子组件触发事件的方法：
$emit(事件名称,参数)

父组件接收事件的方法
组件上 @事件名称来监听子组件事件 $event接收子组件的事件参数

//子组件
<template>
<div>

<p>我是子组件</p>
<p>{{data}}</p>
  <button @click="$emit('toFOO',zi)">点击我向父组件传数据</button>
</div>
</template>

//父组件
<template>
	<div>
    <p>接受子组件数据:{{zidata}}</p>
		<ss  @toFOO="zidata=$event">
    </ss>
	</div>
</template>

备注：：	
父组件也可以通过指定方法进行处理
<ss  @toFOO="指定方法名称">

  
 <script>
指定方法名称（$event）{
  
  
}
</script>

混入mixin

定义一个js 导出mixin混入的内容，修改其中的值不能实现修改后的数据在各组件中更新和vuex不一样

export const mixindata = {
    data() {
        return {
            name: 'minxin value'
        }
    },

};

使用：

import {mixindata} from './mixin/mixindata';
mixins:[mixindata],  //注意数组内是对象不是变量名

  <div>

<p>{{name}}</p>  // dom上直接可以进行使用

 </div>

vuex

背景：

我们编写的组件的所有数据都是存放在组件内部的，调用一个API，然后把返回的数据存放在一个数据对象中。把一个表单绑定到一个对象上，还是把这个对象存放在这个数据对象中。组件之间的所有通信都采用事件（events）方式（子组件往父组件通信）和属性（props）方式（父组件往子组件通信）。在简单的应用场合中，这一套用着不错，但在稍微复杂一点的应用中，就捉襟见肘了。用一个社交网络应用来举个例，就说其中的消息部分。比如说，你想在应用顶部导航栏上放一个图标，用来显示收到的消息数量，同时在页面底部，还想要一个消息弹窗，同样是告诉你收到的消息数量。因为图标和弹窗这两个组件彼此在页面上并无直接联系，所以用events和props来连接它们将会是一场噩梦：与消息通知无关的组件将不得不传递这些额外的事件（译注：因为那两个与消息通知有关的组件之间没有直接联系，并非父子关系，如果用事件方式或属性方式通信，则必然要经过其他组件传递事件或属性）。另外一种方法是，不通过连接两个组件的方式来共享数据，而是每个组件各自发送API请求。但这么做会更糟：不同的组件将会在不同的时间点更新，这就意味着它们会渲染不一样的数据，并且页面所发送的API请求也会远远超过其实际所需。

vuex应运而生，帮助开发者管理Vue应用中的状态。它提供了一种集中式存储（centralized store），可以在整个应用中使用它来存储和维护全局状态。它同时还使你能够对存入的数据进行校验，以保证当这个数据再次被取出时是可预见而且正确的。

理解为全局数据对象就可以了

在这里插入图片描述

src/store/index.js

export default new Vuex.Store({
  // 存储数据的 也叫数据
  state: {

    vuex:'1',
    data:[1,2,3],


  },
  // 用于改变state数据，commit提交由mutations改变数据
  // 不能发送异步请求
  mutations: {
  
    // 第一个参数固定的为state
    setmsg (state,newstate){
      state.msg=newstate
      console.log(state.msg);

  },
  // 动作,可以包含异步操作
  // dispath进行提交actions commit到mutations
  actions: {
  },
  modules: {
  }
})

存数据

方法1

组件通过commit提交一个setmsg事件

changemsg(){
this.$store.commit('setmsg',this.input_msg)

vuex中监听事件并修改值

mutations: {
  // 第一个参数固定的为state
  setmsg (state,newstate){
    state.msg=newstate
    console.log(state.msg);
  }

方法2

通过mapMutations 导入vuex中的方法

methods: {
  ...mapMutations(['setmsg']),
  vuexdata() {
    console.log();
  },

<button @click="setmsg(input_msg)">提交</button>

取数据

mutations同步方法

方式1
this.$store.变量名
方式2 通过辅助函数
导入mapstate助手函数
import {mapState} from 'vuex';

mapState(['name']) 自动获取state中定义的变量‘name’中数据 返回一个计算属性的方法
computed:{
   ...mapState(['name'])   //通过es6 ...语法展开计算属性对象
  }

异步方法action异步方法

方式1通过dispatchs

this.$store.dispatch('action中方法名','传参数')触发动作

方式2 通过辅助函数

mapActions（['Actions中方法']）拿到操作的函数

在这里插入图片描述

vuex文件拆分

vuex文件index.js 内容多的时候会臃肿，不便于维护使用modules组织

我们可以对state、mutations、actions进行拆分

可以在store中建立文件夹modules,根据功能特点定义相关如users.js等文件modules进行注册

modules: {
 user,
}