Vue.js组件传参

• 1. vue.js 组件之间传递数据
  • 1.1. 组件
  • 1.2. 父子组件的传值
  • 1.3. Prop
  • 1.4. 自定义事件
  • 1.5. 兄弟组件的传值
  • 1.6. 父组件中转
  • 1.7. Bus中央事件总线
  • 1.8. Vuex

1. vue.js 组件之间传递数据

前言

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。

1.1. 组件

组件与组件之间，还存在着不同的关系。父子关系与兄弟关系（不是父子的都暂称为兄弟吧）

1.2. 父子组件的传值

父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。

1.3. Prop

子组件想要使用父组件的数据，我们需要通过子组件的 props 选项来获得父组件传过来的数据。以下我使用在 .vue 文件中的格式来写例子。

如何传递数据

在父组件 App.vue 中引用子组件 Users.vue，把 父组件 users：[“Henry”,“Bucky”,“Emily”] 的值传给 Users 组件。

APP.vue父组件

<template>
  <div id="app">
    <Users :users="users" @titleChanged="updateTitle"></Users>
  </div>
</template>

<script>
import Users from "@/components/Users"; 
import Vue from "vue";
export default {
  name: "App",
  //子组件的引入
  components: {
    Users,
  },
  data() {
    return {
      users: ["Henry", "Bucky", "Emily"],
    };
  }
};
</script>

Users子组件

<template>
  <ul>
    <li v-for="(user, index) in users" :key="index">{{ user }}</li>
    <h1 @click="changeTitle">{{ title }}</h1>
  </ul>
</template>
<script>
export default {
  name:"Users"
  // 这就是父组件中子标签自定义名字
  props: {
    users: {
      type: Array,
      required: true
    }
  }
};
</script>

那么页面中就会渲染出：Henry, Bucky, Emily 列表

1.4. 自定义事件

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。修改子组件的 prop 值，是不会传回给父组件去更新视图的。那么子组件要如何去与父组件通讯呢？

那就是自定义事件。通过在父组件 $on(eventName) 监听自定义事件，当子组件里 $emit(eventName) 触发该自定义事件的时候，父组件执行相应的操作。

接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。

Users子组件

<template>
  <div style="background-color:red">
    <h1 @click="changeTitle">{{ title }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "Vue.js Demo"
    };
  },
  methods: {
    changeTitle() {
      this.$emit('titleChanged', '子向父组件传值');
      //   自定义事件 传递值“子向父传值”
    }
  }
};
</script>

App.vue父组件

<template>
  <div id="app">
    <Users  @titleChanged="updateTitle"></Users>
  </div>
</template>

<script>
import Users from "@/components/Users"; 
import Vue from "vue";

export default {
  name: "App",
  //子组件的引入
  components: {
    Users
  },
  data() {
    return {
      title: "传递过来是一个值"
    };
  },
  mounted() {},
  methods: {
    updateTitle(e) {
      //声明这个函数
      this.title = e;
    }
  }
};
</script>

1.5. 兄弟组件的传值

两个组件互不引用，则为兄弟组件。

1.6. 父组件中转

  <div id="app">
    <!-- 兄弟组件之间传值 -->
    <mybrotherA @data-a="updatename"></mybrotherA> 
    <mybrotherB :name="name"></mybrotherB>
  </div>

A要向B传值，可以用$emit传给A、A在使用v-bind传给A2

使用父组件做中转 这里不举例了只是把上面的子向父，父向子连起来用

1.7. Bus中央事件总线

在src目录下新建一个api文件夹，增加一个Bus.js文件

父组件代码

  <div id="app">
    <!-- 兄弟组件之间传值 -->
    <mybrotherA></mybrotherA> 
    <mybrotherB></mybrotherB>
  </div>

哥哥A组件代码

<template>
  <div id="a">
    <h3>A组件:{{ name }}</h3>
    <button @click="send">将数据发送给C组件</button>
  </div>
</template>
<script>
import Bus from "../api/Bus";   //注意引入
export default {
  data() {
    return {
      name: "tom"
    };
  },
  methods: {
    send() {
      Bus.$emit("data-a", this.name);
    }
  }
};
</script>

弟弟B组件

<template>
  <div id="C">
    <h3>C组件：{{ name }}</h3>
  </div>
</template>
<script>
import Bus from "../api/Bus";
export default {
  data() {
    return {
      name: "",
      age: ""
    };
  },
  created() {
    Bus.$on("data-a", (val) => {
      //取  Bus.$on
      this.name = val
    });
  }
};
</script>

1.8. Vuex

vuex的基本使用

1.安装vuex依赖包

npm install vuex --save

2.导入vuex包

import vuex from ‘vuex’
vue.use(vuex)

3.创建store对象

const store = new vuex.store（{
  //state中存放的就是全局共享的数据
  state：{  count：0   }
}）

4.将store对象挂载到vue实例中

new vue（{
     el：#App，

     render： h => h（app）
     router，
     store
}）

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit)

1.state

State提供唯一的公共数据源，所有共享的数据都要到store的state中存储。

const store = new vuex.store（{
  //state中存放的就是全局共享的数据
  state：{  count：0   }
}）

组件访问State中数据的第一种方式

this.$store.state.全局数据名称

第二种方式

//从vuex中按需导入mapState函数
import {mapState} from vuex

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computered属性。

//将全局属性，映射为当前组件的计算属性
computed:{
…mapState([‘count’]）
}

2.Mutation

Mutation用于变更store中的数据
mutations:{
  add(state）{
    //变更状态
    state.count++
  }
}

触发mutation的第一种方法:
methods:{
handle( ){
this.$store.commit(‘add’)
}
}
触发mutation的第二种方法
//从vuex中按需导入Mapmutations函数
import {mapMutation} from vuex
通过刚才的Mapmutation函数，将需要的mutation函数，映射为当前组件的methods函数。
methods:{
…mapMutations{[‘add’]}
}

3.Action
Action用于处理异步任务。
如果通过异步操作变更数据，必须通过action，而不能使用Mutation，但是在Action还是要通过触发Mutation的方式间接变更数据。

actions：{
   addAsync（context） {
      setTimeout（（）=>{
         context.commit('add')
     },1000  ）
  }
}

触发Action的第一种方式

methods:{
   handle( ){
      this.$store.dispatch('add')
    }
}

触发Action的第二种方式

//从vuex中按需导入MapActions函数
import {MapActions} from vuex

通过刚才的MapActions函数，将需要的actions函数，映射为当前组件的methods函数。

methods:{
  ...mapActions{['add']}
}

4.Getter
Getter用于对store中的数据进行加工处理形成新的数据