vue-组件间通信

组件间通信基本原则

1.不要在子组件中直接修改父组件的状态数据

2.数据在哪，更新数据的行为（函数）就定义在哪

main.js

import Vue from 'vue'
import App from './App.vue'

import './base.css'

// 创建vm
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {App}, // 映射组件标签
  template: '' // 指定需要渲染到页面的模板
})

App.vue

storageUtils.js

/*
向local中存储数据的工具模块
1. 向外暴露一个函数(功能)
   只有一个功能需要暴露
2. 向外暴露一个对象(包含多个功能)
   有多个功能需要暴露
 */
const TODOS_KEY = 'todos_key'
export default {
  readTodos () {
    return JSON.parse(localStorage.getItem(TODOS_KEY) || '[]')
  },
  saveTodos (todos) {
    localStorage.setItem(TODOS_KEY, JSON.stringify(todos))
  }
}

TodoFooter.vue

TodoHeader.vue

TodoItem.vue

TodoList.vue

文档结构

vue组件间通信方式

1.props

方式一：只指定名称
props:['name','age','setName']
方式二：指定名称和类型
props：｛
	name:String,
	age:Number,
	setName:Function
｝
方式三：指定名称/类型/必要性/默认值
props:{
	name:{type:String,required:true,default:xxx},
}

注意：
1.此方式用于父组件向子组件传递数据
2.所有标签属性都会成为组件对象的属性，模版页面可以直接引用
3.如果要向非子后代传递数据必须多层逐层传递
4.兄弟组件间也不能直接props通信，必须借助父组件才可以

2.vue的自定义事件
3.消息的订阅与发布（如：pubsub库）
4.slot
5.vuex