vue---props

props

props是什么？

/*
* props是用于子组件接收父组件的数据，可以是简单数组也可以是对象,
* 对象写法可以做一些类型判断，默认值等
* <my-comp :title="header" :body="body"></my-comp>
* Vue.component('my-comp', {
    template: `<div>
        <h1>{{ title }}</h1>
        <p>{{body}}</p>
    </div>`,
    props:['title','body']
  })
  * -------------------------
 props:{
      title:{
        default:'i am not header',
        type:String,
      },
      body:String
    }
* */

可以直接修改props的值吗？

/*
* 可以修改，但是不应该修改，props是单向数据流，数据是从父组件传递过来的，如果是引用类型的话
* 强行修改造成数据混乱，并且vue还会报警告
* Avoid mutating a prop directly since the value will be overwritten 
* whenever the parent component re-renders. Instead, 
* use a data or computed property based on the prop's value
* 
* 如果想对传递的值修饰展示的话可以在组件的data中定义一个，将props的值赋值即可
* 或者使用计算属性
* */
Vue.component('my-comp', {
  template: `<div>
        <h1>{{ title }}</h1>
        <p>{{body}}</p>
        <p>{{person.name}}</p>
        <button v-on:click="handleUpdate">
          update header
        </button>
    </div>`,
  props:{
    title:{
      default:'i am not header',
      type:String,
    },
    person:{
      type:Object,
      default: {}
    },
    body:String
  },
  methods: {
    handleUpdate(){
      console.log(this.title)
      this.title='i am updated'  //不是引用类型，父组件不会修改
      this.person.name='tom'  // 父组件的值被修改
    }
  }
})

组件之间通信？

• props 父---子 //单项数据流
• $refs 父---子 //获取组件实例，可以对子组件进行修改
• $emit 子---父 //事件监听
• $parent 子---父 //子组件获取获取父组件实例如果有的话并且可以修改状态
• $emit和$on 兄---兄 // 事件总线，$emit提交一个事件，并且可以传递参数，$on监听事件名，接收参数
• vuex 全局状态管理 //任何地方都可以获取到数据