vue父组件如何向子组件传参，子组件如何修改父组件的值，字父组件的通信问题的探索

1.父组件向子组件传参

首先在子组件中定义props

  props:{
    categoriesVal: {
      type: Object,
      default : []
    },
  },

按照数据类型定义好type。

然后在父组件中准备好对应类型的数据，然后在调用子组件的地方进行绑定

 <left-side-bar :categories-val="categories"></left-side-bar>

通过:categories-val="categories"进行绑定，其中categories-val是子组件中定义的props，后面那个是父组件的数据变量名。

这样做以后，父组件的值就可以传到子组件，并且可以在子组件中进行使用。

需要注意的就是，在子组件中定义的形式是驼峰命名，在父组件中推荐使用-取缔大写字母进行连接。

2.子组件修改父组件的值

如果想进行修改，可以使用一个简单的办法，父组件在绑定的时候，使用.sync修饰符。例如：

<left-side-bar :list-articles.sync="listArticles"></left-side-bar>

然后当我们需要修改父组件的数据的时候，调用以下方法即可：

this.$emit('update:list-articles', this.articles);

后面的this.articles由子组件提供

3.子组件向父组件传值

在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/>
      子组件传来的值 : {{message}}
    </div>
</template>
<script>
export default {
    // ...
    data() {
        return {
             message: ''
        }
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。

<!-- 子组件 -->
<template>
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }
}
</script>

这样我们就基本实现了子组件向父组件发送值