VUE——组件间通信

组件间通信的基本原则

• 不要在子组件中直接修改父组件的状态数据
• 数据在哪, 更新数据的行为(函数)就应该定义在哪

数据定义在哪个组件?
若多个组件公共一份数据，那么这个数据就定义在他们共同的父组件上

更新数据的函数方法定义在哪个组件?
数据在哪个组件, 那更新数据的行为(函数/方法)就定义,
后面可能需要将这些函数传递给需要调用的后代组件
后代组件不要直接更新父组件传递的数据, 而应该调用函数来更新

props : 父 ——> 子

非函数属性(对象/数组/基本类型)

子组件不要直接修改接收到的属性(props), 只是让你子组件去读取的
如果子组件想要更新父组件的数据 ==> 父组件需要向子组件传递更新数据的函数, 子组件调用（请看下节——函数属性）

使用步骤：

1). 通过标签属性
	props:['comments']
	
2). 父组件中给子组件标签指定属性
	App中 <List :comments="comments"/>
	
3). 子组件中声明接收标签属性:
 接收的所有标签属性都会成为子组件对象的属性, 在模板中可以直接在子组件中使用
	{
   {
   comments}}

子组件声明接收属性的方式：

方式一:

props: ['comments'], // 指定接收属性的属性名

方式二:

props: {
	      comments: Array  // 指定接收属性的属性名和属性值类型
	    }

方式三:

props: {
			sex: { // 指定属性的属性名/属性值的类型 / 默认属性值 / 是否必须的
		        type: Number,
		        default: 1, // 一般在不是必须时使用
		        required: true,  // 即使指定default值, 也必须传递标签属性
		    }
		}

函数属性

函数属性是从父组件传递给子组件,子组件调用了父组件传递的函数属性， 但能显示的数据是从子组件传递给了父组件，最终更新了父组件的数据

父组件：App.vue

<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对Vue的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <Add  :addComment="addComment"/>
      <List :comments = "comments"  :deleteComment="deleteComment"/>
    </div>
  </div>
</template>d
<script type="text/ecmascript-6">
  import Add from '@components/Add'
  import List from '@components/List'

  export default {
   
    data(){
   
      return{
   
        comments:[
          {
   id:1, username : 'A' , content : 'hello'},
          {
   id:2, username : 'B' , content : 'hi'},
          {
   id:3, username : 'C' , content : '你好'},
          {
   id:4, username : 'D' , content : '嗨'}
        ]
      }
    },
    methods:{
   
      addComment(comment){
   
        this.comments.