Vue 组件之间传值通信（常用方法以及示例）

1、父组件通过props向子组件传值

父组件：在子组件上使用:prop-name（注：子组件接收的字段），parentData（注：父组件想要传过去的值，可以是数组，对象，字符串，布尔，数字等等 ）

<template>
  <div>
    <child-component :prop-name="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      parentData: '这是父组件的数据'
    }
  }
}
</script>

子组件：props接收，可以直接在template中使用插值表达式 也可以用this.xx打印

<template>
  <div>{{ propName }}</div>
</template>

<script>
export default {
  props: {
      propName: {
                type: String, //类型
                default: "我是默认值", //不传显示的默认值
            }  
  },
  mounted(){
    console.log(this.propName)
  }
}
</script>

2、通过$emit向父组件传递数据

父组件：通过@子组件的方法='xxxxx' 进行调用自身的方法达到接收处理数据的接收参数

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>接收到的数据：{{ receivedData }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      receivedData: ''
    }
  },
  methods: {
    handleCustomEvent (data) {
      this.receivedData = data
    }
  }
}
</script>

子组件：通过this.$emit('方法名-父接收绑定的@xx名','我是传给父组件的数据')来像父组件传递数据进行通信

<template>
  <button @click="handleClick">点击发送数据</button>
</template>

<script>
export default {
  methods: {
    handleClick () {
      this.$emit('custom-event', '这是子组件的数据')
    }
  }
}
</script>

3.$refs 父组件直接操作子组件实例

父组件：通过this.$refs.xxx 进行操作子组件的实例 可以通过方法传值，可以直接改变子组件data中的数据

<template>
  <div>
    <child-component ref="childComponentRef"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      
    }
  },
 mounted(){
   // 直接调用子组件的方法并且传值
   this.$refs.childComponentRef.init('1111')
   // 直接操作子组件的data中数据 改变值
   this.$refs.childComponentRef.dataNumber = 22
 } 
}
</script>

子组件：父组件传递过来直接使用就行 或者父组件调用的方法子组件直接执行

<template>
  <div></div>
</template>

<script>
export default {
  data() {
	   return {
			dataNumber:1	
		}
	},
  mounted(){
    console.log(this.dataNumber) // 22
  },
 methods:{
 init(parentData){
    console.log(parentData) // 1111
  }
 }
}
</script>

4、Vuex 状态管理

1. 首先，在你的 Vue.js 应用程序中安装 Vuex：

   npm install vuex

2. 创建一个名为 store.js 的新文件并在其中添加以下代码：

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   
   const store = new Vuex.Store({
     state: {
       message: ''
     },
     mutations: {
       setMessage(state, payload) {
         state.message = payload
       }
     },
     actions: {
       updateMessage({ commit }, payload) {
         commit('setMessage', payload)
       }
     }
   })
   
   export default store
   

   上面的代码创建了一个新的 Vuex store，其中包含名为 message 的状态和两个方法：setMessage 和 updateMessage。setMessage 方法将接收到的值设置为 message 状态的新值，而 updateMessage 方法将调用 setMessage 方法并传递一个新值。

3. 在你的组件中使用 Vuex 状态：

   <template>
     <div>
       <input v-model="message">
       <button @click="submitMessage">提交</button>
     </div>
   </template>
   
   <script>
   import { mapActions } from 'vuex'
   
   export default {
     data() {
       return {
         message: ''
       }
     },
     methods: {
       ...mapActions(['updateMessage']),
       submitMessage() {
         this.updateMessage(this.message)
         this.message = ''
       }
     }
   }
   </script>
   //上面的代码创建了一个包含一个输入框和一个提交按钮的组件。
   //当用户在输入框中输入文本并点击提交按钮时，submitMessage 方法将调用 updateMessage 方法，
   //并将输入框中的值传递给它。

4. 在另一个组件中访问 Vuex 的状态： 

   <template>
     <div>
       <p>当前消息: {{ message }}</p>
     </div>
   </template>
   
   <script>
   import { mapState } from 'vuex'
   
   export default {
     computed: {
       ...mapState(['message'])
     }
   }
   </script>
   //上面的代码创建了一个显示当前消息的组件。
   //它通过使用 mapState 辅助函数从 Vuex store 中获取 message 状态，
   //并将其作为计算属性暴露出来，以便在模板中使用。

5、还有一些不常用的 就没有一一列举，欢迎评论区补充！！！

例如：eventBus，$children,$root,$parent,provide，inject