Vue组件传参方式

基本原则：
不要在子组件中直接修改父组件的状态数据
数据在哪, 更新数据的行为(函数)就应该定义在哪
通信方式：
1.Vuex 多组件共享状态（数据的管理）
(查看Vuex状态管理)
2.props传参
组件标签内，父组件向子组件传递数据
组件内声明所有props的方式：

①： 只指定名称		props: ['name', 'age', 'setName'] 
②： 指定名称和类型	
			    props: {
						name: String,
						  age: Number,
						  setNmae: Function
				}
③： 指定名称/类型/必要性/默认值
			

props: {
	   			  name: {type: String, required: true, default:xxx},
				}

1.子–>父
父:

1.
import Item from './Item.vue'
export default {
// 声明接收属性: 属性名
props: ['todos', 'deleteTodo'], // 所有接收属性都会成为组件对象的属性(只读)
data () { // 组件对象可以读取data中的属性
  return {
        }
},
components: {
  Item
}

}
2.

子:

1. {{todo.title}}

list在这里插入代码片



header在这里面输入代码:



footer在这里输入代码:

–
2.父–>子
父:

子:

当我们点击子组件button的时候就会打印对应的 xxx, 王老吉
4. PubSub

下载包： npm install –save pubsub-js  
		发布消息： PubSub.publish('msg', data)  
订阅消息： PubSub.subscribe('msg', function(msg, data){})  
**4. slot（插槽）**		
用于父组件向子组件传递 标签数据 ， 标签里的props属性在父组件里编译 
	子组件： 
		 
		父组件：