Vue组件之间的传值的方式

父子组件之间的传值

方法一：props 和 $emit

父组件： 传值count给子组件

<template>
  <div class="hello">
    <!-- header -->
    <Header @func="Receive" :count="msg"></Header>
    <!-- nav -->
  </div>
</template>

<script>
import Header from '@/components/header/index.vue'
export default {
  name: 'index',
  data(){
    return {
      msg: "你好，我是父组件传过来的值"
    }
  },
  components:{
    Header
  },
  methods:{
    Receive(msg){
      console.log(`父组件：${msg}`);
    }
  }
}
</script>
<style scoped>
</style>

子组件接收：子组件通过props接收父组件传来的值

export default {
    name: 'Header',
    props:{
        count: String
    },
    data(){
        return {
            title: 'hello'
        }
    }
}

子组件向父组件传值

子组件：子组件点击之后通过$emit传值给父组件

<template>
    <div class="header">
        <h1 @click="toParent">header-{{title}}</h1>
    </div>
</template>
<script>
export default {
    name: 'Header',
    data(){
        return {
            title: 'hello'
        }
    },
    methods:{
        toParent() {
            this.$emit('func', '你好，我是子组件传过来的值')
        }
    }
}
</script>

父组件：通过事件函数来接收子组件传来的值

<template>
  <div class="hello">
    <!-- header -->
    <Header @func="Receive"></Header>
    <!-- nav -->
  </div>
</template>

<script>
import Header from '@/components/header/index.vue'
export default {
  name: 'index',
  components:{
    Header
  },
  methods:{
    Receive(msg){
      console.log(`父组件：${msg}`);
    }
  }
}

 

方法二：通过$children 和 $parent 获取目标实例对象

父组件：

mounted(){
    console.log(this.$children[0].title = 'hello world')
  }

子组件

console.log(this.$parent.msg) //你好，我是父组件传过来的值

多级嵌套传值

provide/ inject

父组件：provide 所有子组件数据的提供者

provide:{
    par: '父组件provider'
  },

子组件以及多有的后代组件：

inject:['par'],

mounted(){
        console.log(this.par); //父组件provider
    }

说明：此种方式传值只限于父组件和其后代组件的传值 不能够用于同级组件之间的传值

 

ref / refs // 传值

// 父组件中ref绑定子组件

<Header @func="Receive" :count="msg" ref="head"></Header>


// 通过$refs获取此子组件的实例

console.log(this.$refs.head); // 子组件实例  

Vuex 传值 // 具体使用方式请看官方文档

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.

Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上

 

 $attrs与 $listeners 传值

 // props:{
    //     count: String
    // },
    inheritAttrs: false,  // 去消默认行为
    
    mounted(){
        console.log(this.$attrs); // {count: "你好，我是父组件传过来的值"}
    }