Vue-cli（4）组件之间的传值

一、父子组件传值

父传子

在父级组件里面定义两个变量，在子级组件里面接收，但是props里面的数据是不能修改的，需要中转一下。

<template>
  <div class="animal">
     <h2>动物</h2>
     <div>名称：{{name1}}</div>
     <div>年龄：{{age1}}</div>
     <Bird :name='name1' :age='age1'></Bird>
  </div>
</template>
<script>
import Bird from './Bird.vue'
export default {
  name: "Animal",
  data(){
      return{
          name1:'大雁',
          age1:8,
      }
  },
  components:{
      Bird
  }
};
</script>

<template>
  <div class="brid">
     <h2>鸟类</h2>
     <div>名称：{{name}}</div>
     <div>年龄：{{age}}</div>
  </div>
</template>
<script>
export default {
  name: "Brid",
  //props里面的数据是不能修改的
  props:['name','age']
};
</script>

子传父

可以通过$emit触发自定义事件进行传值。

<template>
  <div class="brid">
     <h2>鸟类</h2>
     <div>名称：{{myName}}</div>
     <div>年龄：{{myAge}}</div>
     <button @click='upDate'>修改信息</button>
  </div>
</template>
<script>
export default {
  name: "Brid",
  //props里面的数据是不能修改的
  props:['name','age'],
  data(){
    return{
        myName:this.name,
        myAge:this.age
    }
  },
  methods: {
      upDate(){
         this.myName='仙鹤'
         this.myAge=33 
         //向父组件传值，可以通过$emit触发自定义事件
         this.$emit('upDate',{name:this.myName,age:this.myAge})
      }
  },
};
</script>

<template>
  <div class="animal">
     <h2>动物</h2>
     <div>名称：{{name1}}</div>
     <div>年龄：{{age1}}</div>
     <Bird :name='name1' :age='age1' @upDate='upDate'></Bird>
  </div>
</template>
<script>
import Bird from './Bird.vue'
export default {
  name: "Animal",
  data(){
      return{
          name1:'大雁',
          age1:8,
      }
  },
  components:{
      Bird
  },
  methods: {
      //该方法，修改name1和age1数据
      upDate(e){
          console.log(e);
          this.name1=e.name
          this.age1=e.age
      }
  }
};
</script>

2、祖孙组件传值

祖向孙传值

使用provide方法添加依赖数据，它里面定义的数据，子组件可以选择性注入并直接使用。在孙组件里使用inject接收。

<template>
  <div class="animal">
     <h2>动物</h2>
     <div>名称：{{name1}}</div>
     <div>年龄：{{age1}}</div>
     <hr>
     <div>名称：{{name2}}</div>
     <div>年龄：{{age2}}</div>
     <Bird :name='name1' :age='age1' @upDate='upDate'></Bird>
  </div>
</template>
<script>
import Bird from './Bird.vue'
export default {
  name: "Animal",
  data(){
      return{
          name1:'大雁',
          age1:8,
          name2:'小明',
          age2:12
      }
  },
  components:{
      Bird
  },
  methods: {
      //该方法，修改name1和age1数据
      upDate(e){
          console.log(e);
          this.name1=e.name
          this.age1=e.age
      }
  },
  //provide方法，返回的对象里面的数据是依赖数据
  provide(){
      return{
          boveName:this.name2,
          boveAge:this.age2
      }
  }
};
</script>

<template>
  <div class="dove">
    <h2>鸽子</h2>
    <div>名称：{{ myBoveName }}</div>
    <div>年龄：{{ myBoveAge }}</div>
  </div>
</template>
<script>
export default {
  name: "Dove",
  //从父级组件中注入依赖的数据
  inject: ["boveName", "boveAge"]
</script>

孙向祖传值

<template>
  <div class="dove">
    <h2>鸽子</h2>
    <div>名称：{{ myBoveName }}</div>
    <div>年龄：{{ myBoveAge }}</div>
    <button @click="updateBove">修改信息</button>
  </div>
</template>
<script>
export default {
  name: "Dove",
  //从父级组件中注入依赖的数据
  inject: ["boveName", "boveAge", "updateDove"],
  data() {
    return {
      myBoveName: this.boveName,
      myBoveAge: this.boveAge,
    };
  },
  methods: {
    updateBove() {
      this.myBoveName = "小红"
      this.myBoveAge = 6
      //执行父级组件中的updateDove方法
      this.updateDove({ name: this.myBoveName, age: this.myBoveAge });
    }
  },
};
</script>

<template>
  <div class="animal">
     <h2>动物</h2>
     <div>名称：{{name1}}</div>
     <div>年龄：{{age1}}</div>
     <hr>
     <div>名称：{{name2}}</div>
     <div>年龄：{{age2}}</div>
     <Bird :name='name1' :age='age1' @upDate='upDate'></Bird>
  </div>
</template>
<script>
import Bird from './Bird.vue'
export default {
  name: "Animal",
  data(){
      return{
          name1:'大雁',
          age1:8,
          name2:'小明',
          age2:12
      }
  },
  components:{
      Bird
  },
  methods: {
      //该方法，修改name1和age1数据
      upDate(e){
          console.log(e);
          this.name1=e.name
          this.age1=e.age
      },
      //该方法，修改name2和age2的数据
      updateDove(bove){
          this.name2=bove.name,
          this.age2=bove.age
      }
  },
  //provide方法，返回的对象里面的数据是依赖数据
  provide(){
      return{
          boveName:this.name2,
          boveAge:this.age2,
          //将修改name2和age2的方法，设置为依赖数据
          updateDove:this.updateDove
      }
  }
};
</script>

3、兄弟之间传值

在Vue是原型对象上，添加一个bus属性，该属性的的属性值是一个Vue实例。
将Vue的所有实例，都将共用同一个bus。
这个$bus属性，我们称之为：中央事件总线
在main.js文件中写以下代码

Vue.prototype.$bus = new Vue()

在兄弟组件中写

<template>
  <div class="crow">
    <h2>乌鸦</h2>
    <div>名称：{{ name }}</div>
    <div>年龄：{{ age }}</div>
  </div>
</template>
<script>
export default {
  name: "Crow",
  data() {
    return {
      name: "小李",
      age: 14,
    };
  },
  mounted() {
    //监听updateCrow事件，当前该事件触发时，会执行对应函数。
    this.$bus.$on("updateCrow", (e) => {
      this.name = e.name;
      this.age = e.age;
    });
  },
};
</script>

<template>
  <div class="dove">
    <h2>鸽子</h2>
    <div>名称：{{ myBoveName }}</div>
    <div>年龄：{{ myBoveAge }}</div>
    <button @click="updateBove">修改信息</button>
    <button @click="updateCrow">修改乌鸦信息</button>
  </div>
</template>
<script>
export default {
  name: "Dove",
  //从父级组件中注入依赖的数据
  inject: ["boveName", "boveAge", "updateDove"],
  data() {
    return {
      myBoveName: this.boveName,
      myBoveAge: this.boveAge,
    };
  },
  methods: {
    updateBove() {
      this.myBoveName = "小红"
      this.myBoveAge = 6
      //执行父级组件中的updateDove方法
      this.updateDove({ name: this.myBoveName, age: this.myBoveAge });
    },
    //修改乌鸦信息的方法
    updateCrow() {
      //触发updateCrow事件
      this.$bus.$emit("updateCrow", { name: "小盼", age: 20 });
    },
  },
};
</script>

4、全局状态管理

4.1安装

npm install store

4.2导入

在src文件夹下面新建一个store文件夹，再此文件夹下面新建一个index.js文件。

//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)

4.3、创建

也写在创建的index.js文件夹里

//创建全局状态管理对象
export default new Vuex.Store({
    //定义全局状态（状态就是数据）
   state:{
       car:{
           name:'奔驰',
           price:'100W'
       }
   },
   //定义修改状态的方法
   mutations:{
       //该方法，修改汽车信息
       updateCar(state,val){
          state.car=val
       }
   }
})

4.4、使用

<template>
  <div class="animal">
     <div>汽车名称：{{$store.state.car.name}}</div>
     <div>汽车价格：{{$store.state.car.price}}</div>
     <button @click='updateCar'>修改汽车信息</button>
  </div>
</template>
<script>
export default {
  name: "Animal",
  methods: {
      //该方法，修改name1和age1数据
      upDate(e){
          console.log(e);
          this.name1=e.name
          this.age1=e.age
      },
      //修改汽车信息的方法
      updateCar(){
        //$store返回的是当前项目中的全局状态管理对象
        //该对象的commit（）方法，用于调用mutations选项里面定义的方法
        this.$store.commit('updateCar',{name:'大众',price:'60W'})
      }
  },
};
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容