vue组件通信传参方式

vue组件传参包括父组件向组件传参，子组件向父组件传参，组件之间传参这三种

一、props和$emit

子组件向父组件传参

子组件向父组件传参，通过定义参数的方式传递参数
1.在组件中动态绑定（如果只想传递一个静态的prop ，可以不绑定，如下）要传递的数据
2.在子组件中使用 props 选项去接收来自父组件传递过来的数据
完整代码如下

//父组件
<child :msg= "'这里是你要传给子组件的数据'" class="child"> 
//msg为自定义属性，动态像子组件传递数据
//子组件
<script>
    let child = {
      template: `

      
下面是来自爸爸的信息:
      
{{ msg }}
    
`,
      props: ['msg'] //通过props属性接收父组件传递的参数
    }
    let father = new Vue({
      el:'#father',
      components: { child }, // 注册子组件
      data: {
        message: 'message from father'
      }
    })
  </script>

关于props

1.可以使用v­-bind动态绑定父组件来的内容
2.在组件中使用props来从父组件接收参数，注意，在props中定义的属性，都可以在子组件中直接使用
3.props来自父级，而组件中data return的数据就是组件自己的数据，两种情况作用域就是组件本身，可以在template，computed，methods中直接使用（子组件不能直接修改props中的值）
4.props的值有两种，一种是字符串数组，一种是对象
对于数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态（尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态）

子组件向父组件传参

自定义事件

子组件用 $emit()来触发事件，父组件用v-on来监听子组件的事件第一步：自定义事件第二步：在子组件中用$emit触发事件。第一个参数是事件名，后边的参数是要传递的数据
第三步：在自定义事件中用一个参数来接收

在父组件中自定义事件

  <div id="app">
      <h4>我是父组件 h4>
      <p>目前积分是： {{ data }}p>
      <hr>
      <son-component @update-data="update" > son-component>
    
   div>

在子组件中用$emit触发事件，并传入一个值

 add: function () {
             this.count += 10;
             this.$emit('update-data', this.count);
           //  事件名不存在任何自动化的大小写转换,而是触发的事件名需要完全匹配监听这个事件所用的名称，所以这里仍旧是'update-data'
           },

补充

缺点
1.子组件不能直接修改props里父组件传递的数据
2.子组件如果想更新父组件的prop数据，只能通过$emit触发事件的方式，当父子组件参数过多时，代码会很累赘

具体是2点几之后的vue开始支持同步数据我不太记得了，代码如下
父组件

<Dialog :show.sync="showSafeDialog" title="安全防护措施和手段" width="50%">

            <div v-html="means">div>
 Dialog>


   data() {
            return {
                    showSafeDialog: false
            }
        },
  

子组件

 <div class="dialog" v-if="show">
            <div class="mainBox" :style="{width: width,left: ( 100 - parseInt(width)) / 2+'%',top: top}">
                <div class="title">{{title}}div>
                <GeminiScrollbar style="max-height: 90%;">
                    <div class="content">
                        <slot>slot>
                    div>
                GeminiScrollbar>
            div>
            <div class="zhe" @click="close">div>
        div>
 
<script>
    export default {
        name: "Dialog",
        props: {
            title: {
                default: '',
                type: String
            },
            width: {
                default: '60%',
                type: String
            },
            show: {
                default: false,
                type: Boolean
            },
            top: {
                default: '20%',
                type: String
            }
        },
        methods: {
            close() {
                this.$emit('update:show', false)
                //通过 this.$emit('update:show', false)修改props中的值
            }
        },
        watch: {}
    }
script>

二、$parent、$children、$ref

父组件通过 $ref 获取子组件数据 调用子组件方法

<template>
  <div class="parent">
  <div class="todo" @click='todo'>div>
    <child ref='child'>child>// ref 作用在组件上 指向的是组件的实例 实例上的方法都可以调用
  div>
template>

<script>
    import child from '../base/child'
    
    export default {
        data(){
          return {
          }
        },
        methods:{
            todo(){
                console.log(this.$refs.child.msg)//输出子组件中的data数据
                this.$refs.child.do()//调用子组件的方法
            }
        },
        components:{
            child
        }
    }
script>

父组件通过 $children 获取子组件数据和调用子组件方法

<template>
  <div class="parent" @click='fatherMethod'>
    <child>child>// ref 作用在组件上 指向的是组件的实例 实例上的方法都可以调用
  div>
template>

<script>
    import child from '../child'
    
    export default {
        methods:{
          fatherMethod() {
              this.$children[0].do() // $children获取的是子组件的数组 通过索引找到对应的子组件的实例
              console.log(this.$children[0].msg)
          }
        },
        components:{
            child
        }
    }
script>

子组件通过 $parent 获取父组件数据和调用父组件方法

<template>
  <div class="child" @click='childClick'>
  div>
template>

<script>

    export default {
        data() {
            return {
                msg: '我是子组件传递过来的数据'
            }
        },
        methods:{
            childClick(){
                this.$parent.fatherMethod()//调用父组件中的方法
                console.log(this.$parent.msg)//输出父组件中的data数据
        }
        }
    }
script>

三、$emit和$on

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。

具体实现方式

var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {}); 

<div id="itany">
    <my-a>my-a>
    <my-b>my-b>
    <my-c>my-c>
div>
<template id="a">
  <div>
    <h3>A组件：{{name}}h3>
    <button @click="send">将数据发送给C组件button>
  div>
template>
<template id="b">
  <div>
    <h3>B组件：{{age}}h3>
    <button @click="send">将数组发送给C组件button>
  div>
template>
<template id="c">
  <div>
    <h3>C组件：{{name}}，{{age}}h3>
  div>
template>
<script>
var Event = new Vue();//定义一个空的Vue实例
var A = {
    template: '#a',
    data() {
      return {
        name: 'tom'
      }
    },
    methods: {
      send() {
        Event.$emit('data-a', this.name);
      }
    }
}
var B = {
    template: '#b',
    data() {
      return {
        age: 20
      }
    },
    methods: {
      send() {
        Event.$emit('data-b', this.age);
      }
    }
}
var C = {
    template: '#c',
    data() {
      return {
        name: '',
        age: ""
      }
    },
    mounted() {//在模板编译完成后执行
     Event.$on('data-a',name => {
         this.name = name;//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
     })
     Event.$on('data-b',age => {
         this.age = age;
     })
    }
}
var vm = new Vue({
    el: '#itany',
    components: {
      'my-a': A,
      'my-b': B,
      'my-c': C
    }
});
script>

四、vuex

vuex是vue的一个状态管理器，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，在vue脚手架中使用教程官网介绍的已经很清楚，下面是一些小结

vuex各个模块

state：用于数据的存储，是store中的唯一数据源

getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算

mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件

actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作

modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护