Vue组价通信

1.什么是路由？

单页面应用程序开发

无跳转，所有的交互都需要在一个页面完成

2.组件通信

一，父传子组件通信 (pass props / props down)

调用组件的方式就是写组件名称标签

传递数据：

将渲染的列表数据放到根组件App.js中，然后通过通信让子组件获取数据

我们可以在父组件中通过组件标签属性来传递数据

a.在使用组件标签上添加自定义属性

<todo-main foo = 'bar'></todo-main>

b.在子组件中通过props选项声明接收该数据 ,相当于声明函数形参

props: [ ' foo ' ]

c.然后我们就可以在子组件中像使用data属性成员一样来使用props中的数据 <label>{{ foo }}</label>

d.使用v-bind来传递动态数据

二，子传父组件通信 （Emit event / events up ）

在子组件中绑定函数，获取数据，传递给父组件，再由父亲自己去决定如何使用这个数据

a.发布一个自定义事件 $.emit('tianjia',value)

b.在使用组件标签上通过v-on的方式来监听组件内部发布的自定义事件

c.在父组件调用子组件标签上绑定事件处理函数

d.在父组件中添加一个方法，形参就是接收的事件处理函数的value，用子组件的处理函数绑定父组件的方法，就可以将父子组件联系在一起

清空文本框，子组件自己处理，直接将value=‘’ ‘’

3.props

prop是单向绑定的，当父组件的属性数据变化时，将传递给子组件，但是反之不会，即子组件不能去修改prop数据，引用类型除外

无论是普通数据还是引用数据都不能重新赋值，都只是修改

修改：this.user.name = 'hahha';

重新赋值：this.user = { };

因为JavaScript中对象和数组是引用数据类型，指向同一个内存空间，如果prop是一个对象或者数组，在子组件内部改变会影响父组件的状态

props验证：

props: { //推荐这样来定义props，更严谨

todos: {

type:Array,

//require:true //必须给，此时require和default互斥，只选一个就可以

default: function(){

return [ ]; //props默认值，如果没有传值，就是空数组

}

}

}