六、组件间传值

1.父子组件传值

(1) 父传子

父组件向子组件传值，可以通过绑定属性传值；子组件通过props接收父组件传值。
父组件：

<div class="animal">
        <h2>动物</h2>
        <div>名称：{{name1}}</div>
        <div>年龄：{{age1}}</div>
        <!-- 通过给组件绑属性，通过属性把这两个值传过去 -->
        <!-- 向子组件传值，可以通过props，子组件里要props接 -->
        <Bird :name="name1" :age="age1"></Bird>
  </div>

<script>
import Bird from './Bird.vue'
export default {
  name: "Animal",
  data() {
      return {
          name1:'大雁',
          age1:20,
      }
  },
  components:{
      Bird
  },
};
</script>

父组件中定义的数据，使用绑定属性的方法，给子组件标签绑定属性，
然后在子组件页面中使用props和插值表达式来接收数据。
（props中的数据不能修改，需要中转）
在子组件中想要修改父组件传过来的值，此时如果自定义一个update函数，只能修改当前页面的数据，
此时，就需要使用$emit来触发一个自定义事件，格式如下，
此处引号中的updateData是自定义事件的名称，
其次将当前页面中转props数据的myName和myAge分别定义为n和a。
注意格式，里面是一个对象。

子组件：

接收父组件传值props:['name','age']。子传父，触发一个自定义事件this.$emit('updateName',this.myName)。

  <div class="bird">
    <h2>鸟类</h2>
    <div>名称：{{ myName }}</div>
    <div>年龄：{{ myAge }}</div>
    <button @click="updateData">修改信息</button>
  </div>

<script>
export default {
  name: "Bird",
  props: ["name", "age"],
  data() {
    return {
      myName: this.name,
      myAge: this.age,
    };
  },
  methods: {
    updateData() {
      this.myName = "仙鹤";
      this.myAge = 10;
      // 向父组件传值，可以通过$emit触发自定义事件
      this.$emit("updateData", {n: this.myName,a: this.myAge});
    },
  },
};
</script>

注意：props里面的数据是不能修改的。
=>>> 也就是不能直接在methods写方法，
methods:{ updateData(){ this.name = '仙鹤' this.age = 10 } }
Σ( ° △ °|||)︴达咩

然后
在父页面中的子页面标签中添加@updateData="updateData"，
前面的updateData是子页面中自定义事件的名称，
后面的updateData是给当前页面定义的一个函数的名称，
然后然后
在methods中定义该方法，此处的e就是子页面传给父页面的数据，最后修改当前页面的数据即可。

  <div class="animal">
        <h2>动物</h2>
        <div>名称：{{name1}}</div>
        <div>年龄：{{age1}}</div>
        <Bird :name="name1" :age="age1" @updateData="updateData"></Bird>
  </div>

<script>
import Bird from './Bird.vue'
export default {
  name: "Animal",
  data() {
      return {
          name1:'大雁',
          age1:20
      }
  },
  components:{
      Bird
  },
  methods: {
      updateData(e){
          this.name1 = e.n
          this.age1 = e.a
      }
  },
};
</script>

---

2.祖孙组件传值

首先祖先给子孙后代传值也是可以用props传递，一层层传递，如果嵌套了五六层，这种方法就显得很繁琐。
所以就用到了provide(提供)和inject(注入)。
这两个是配套使用的，以允许祖先向所有祖先后代注入一个依赖。
祖先组件通过provide添加依赖数据，它里面定义的数据，后代组件可以通过inject选择性注入并直接使用。
注意：后代组件通过inject注入祖级组件中的依赖数据，跟props一样，接收的数据是只读的，不能修改。

祖先组件：

<div class="animal">
  <div>名称：{{ name2 }}</div>
  <div>年龄：{{ age2 }}</div>
  <Bird :name="name1" :age="age1" ></Bird>
</div>

data() {
  return {
    name2: "小明",
    age2: 5
  };
}
// 添加依赖数据，它里面定义的数据，子组件可以选择性注入并直接使用。
provide() {
  return {
    doveName: this.name2,
    doveAge: this.age2,
    // 将修改name2和age2的方法，设置为依赖数据
    updateDove: this.updateDove,
  };
},
methods: {
  updateDove(dove) {
    this.name2 = dove.name;
    this.age2 = dove.age;
  },
}

后代组件：

<div class="dove">
  <h2>鸽子</h2>
  <div>名称：{{ mydoveName }}</div>
  <div>年龄：{{ mydoveAge }}</div>
  <button @click="updateData">修改数据</button>
</div>

// 从父级组件中注入依赖的数据
inject: ["doveName", "doveAge", "updateDove"],
data() {
  return {
    mydoveName: this.doveName,
    mydoveAge: this.doveAge,
  };
},
methods: {
  updateData() {
    this.mydoveName = "小红";
    this.mydoveAge = 8;
    // 执行父级组件中的updateDove方法
    this.updateDove({ name: this.mydoveName,age: this.mydoveAge, });
  }
}

=>>>Vue官方-依赖注入

---

3.兄弟组件传值

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

在vue的入口文件main.js中添加该属性，

Vue.prototype.$bus = new Vue()

在两个兄弟组件中分别写入，

methods: {
    // 修改乌鸦信息的方法
    updateCrow(){
        this.$bus.$emit('updateCrow',{name:'小王',age:30})
    }
},

mounted() {
    // 监听updateCrow事件，当该事件触发时，会执行对应的回调函数
    this.$bus.$on('updateCrow',(e)=>{
      this.name=e.name
      this.age=e.age
    })
  },

---

4.全局状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

(1) 安装： npm install vuex --save
(2) 在入口文件main.js中导入并使用
(3) 创建全局状态管理对象vuex
(4) 注册

// 导入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)
// 创建全局状态管理对象
const store = new Vuex.Store({
  // ...
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

我们一般在src资源文件夹中单独创建一个store文件夹，
然后在该文件夹中创建index.js，
然后将上述内容全部迁移至该文件中，
此处需要单独引入vue，并且在创建全局状态管理对象时直接导出

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

// 创建全局状态管理对象
export default new Vuex.Store({

})

最后在入口文件main.js中引导入store

import store from './store'