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中的数据进行加工处理形成新的数据

你可能感兴趣的:(vue.js,前端)