Vue组件通信应用实践总结

props
vue的自定义事件
pubsub第三方库
slot
vuex

父子组件间通信的基本方式
属性值的2大类型: 
 一般: 父组件-->子组件
 函数: 子组件-->父组件
隔层组件间传递: 必须逐层传递(麻烦)
兄弟组件间: 必须借助父组件(麻烦)

子组件与父组件的通信方式
用来取代function props
不适合隔层组件和兄弟组件间的通信

<template>
  <div class="todo-container">
    <div class="todo-wrap">
    <!-- 给子组件绑定方法 -->
      <TodoList :todos="todos"/>
    <!-- 给子组件绑定方法并传值 -->      
      <TodoFooter :todos="todos" :deleteCompleteTodos="deleteCompleteTodos" :selectAll="selectAll"/>
    </div>
  </div>
</template>

<script>
//import引入组件
  import TodoHeader from './components/TodoHeader.vue'
  import TodoList from './components/TodoList.vue'
  import TodoFooter from './components/TodoFooter.vue'
  import storageUtils from './utils/storageUtils'
  export default {
  //声明组件
    components: {
      TodoHeader,
      TodoList,
      TodoFooter
    }
    //数据
    data () {
      return {
        todos: storageUtils.readTodos()
      }
    },
    methods: {
      addTodo (todo) {
        this.todos.unshift(todo)
      },
      deleteTodo (index) {
        this.todos.splice(index, 1)
      },
      // 删除所有已完成的
      deleteCompleteTodos () {
        this.todos = this.todos.filter(todo => !todo.complete)
      },
      // 全选/全不选
      selectAll (isSelectAll) {
        this.todos.forEach(todo => {
          todo.complete = isSelectAll
        })
      }
    }
  }
</script>

name
components
props
data
created
methods
mounted
computed
watch

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="checkAll"/>
    </label>
    <span>
          <span>已完成{{completeSize}}</span> / 全部{{todos.length}}
        </span>
    <button class="btn btn-danger" v-show="completeSize" @click="deleteAllCompleted">清除已完成任务</button>
  </div>
</template>
<script>
  export default {
  //接收父组件的值传递与方法传递
    props: {
      todos: Array,
      deleteCompleteTodos: Function,
      selectAll: Function
    },
    computed: {
      completeSize () {
        return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete?1:0) ,0)
      },
      checkAll: {
        get () { // 决定是否勾选
          return this.completeSize===this.todos.length && this.completeSize>0
        },
        set (value) {// 点击了全选checkbox  value是当前checkbox的选中状态(true/false)
          this.selectAll(value)
        }
      },
    },
    methods: {
      deleteAllCompleted () {
        if(window.confirm('确定清除已完成的吗?')) {
          this.deleteCompleteTodos()
        }
      }
    }
  }
</script>

 export default {
    // 声明接收标签属性
    props: ['todos'], // 会成为当前组件对象的属性, 可以在模板中直接访问, 也可以通过this来访问
    components: {
      TodoItem
    }
  }

 export default {
    props: {// 指定属性名和属性值的类型
      todo: Object,
      index: Number
    }
}

 export default {
    props: {
      todo: {
    type:Function,
    required:true,
     default: function () {
          return { message: 'hello' }
        },
     validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
      },
      index: Number
    }
}

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

import PubSub from 'pubsub-js'

PubSub.publish('msg', data)

DOM 事件: 用户在浏览器上对应的界面上做对应的操作
自定义: 编码手动触发

 deleteItem () {
        // this.deleteTodo(this.index)
        // 发布消息(deleteTodo)
        PubSub.publish('deleteTodo', this.index)
      }

PubSub.subscribe('msg', function(msg, data){})

目标: 标签元素<button>
事件名(类型): click/focus
回调函数: function(event){}

    mounted () {
      // 绑定自定义事件(addTodo)监听
      this.$refs.header.$on('addTodo',  this.addTodo)
      // 订阅消息(deleteTodo)
      PubSub.subscribe('deleteTodo', (msg, index) => {
        this.deleteTodo(index)
      })
    },

<TodoFooter>
  <input slot="checkAll" type="checkbox" v-model="checkAll" />
  <span slot="size">已完成{{completeSize}} / 全部{{todos.length}}</span>
  <button slot="delete" class="btn btn-danger" v-show="completeSize" @click="deleteAllCompleted" >清除已完成任务</button>
</TodoFooter>

<template>
  <div class="todo-footer">
    <label>
      <!--<input type="checkbox" v-model="checkAll"/>-->
      <slot name="checkAll"></slot>
    </label>
    <span>
      <slot name="size"></slot>
     <!-- <span>已完成{{completeSize}} / 全部{{todos.length}}</span>-->
    </span>
    <slot name="delete"></slot>
   <!-- <button class="btn btn-danger" v-show="completeSize" @click="deleteAllCompleted">清除已完成任务</button>-->
  </div>
</template>

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

#给TodoHeader 标签对象绑定addTodo事件监听
<TodoHeader @addTodo="addTodo"/>

//this.addTodo(todo)---原先使用props通信
/*触发自定义事件: addTodo*/
this.$emit('addTodo', todo)

<TodoHeader ref="header"/>
mounted () {
  // 绑定自定义事件(addTodo)监听
  this.$refs.header.$on('addTodo',  this.addTodo)
}