父子组件传值以及vue路由的使用

父组件传值给子组件

设置props属性接收父组件传值：如果传递的值是字符串类型或者数字类型的需要在props里说明一下

如图 name是自己定义的一个属性名，需要将它当做属性名写在子组件中，而父组件要传递的值就是属性值。图中default是需要设置的默认值，如果子组件中不传参，就默认传default中的参数

子组件传值给父组件

子组件调用父组件的方法：

1. 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）

2. 子组件可以触发这个事件$emit('事件名字')

子组件给父组件传递数据：

1. $emit方法第二个参数可以定义子组件给父组件传递的内容

2. 在父组件中怎么拿到这内容：

• 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到

• 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数

 ref的使用

• 获取dom节点

1. 给dom节点记上ref属性，可以理解为给dom节点起了个名字

2. 加上ref之后，在$refs属性中多了这个元素的引用

3. 通过vue实例的$refs属性拿到这个dom元素

• 获取组件

1. 给组件记上ref属性，可以理解为给组件起了个名字

2. 加上ref之后，在$refs属性中多了这个组件的引用

3. 通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据

 vue中路由的使用

什么是路由？

1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

2. 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）。

路由的基本使用：

1. 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）

2. 创建路由new VueRouter(),接受的参数是一个对象

3. 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性

4. path属性是url的地址,component属性就是显示的组件（传组件的对象）

5. 创建的路由需要和vue实例关联一下

6. 路由到的组件显示在哪个位置<router-view></router-view>

如图：

 路由的跳转：

router-link标签可以设置to属性。

1. 可以通过query的方式在url后加?参数名=参数的值

获取参数：$route.query.参数名

如图：

2.使用浏览器参数的方式传递参数

• 设置路由的时候/路由地址/:参数名

• 获取参数$route.params.参数名

组件的嵌套

1. 声明路由的时候设置children,这是children是一个数组，数组里是路由对象

2. 这个children的组件就会渲染在它父组件的<router-view>中

命名视图

1. 我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件

2. components属性设置的

3. 给router-view设置名字，这个名字和components组件名字是对应的

4. 设置默认值default对应组件可以设置名字也可以访问

 计算属性和监听器

 Watch和computed用法：

method、computed和watch的区别：

1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；

2. methods方法表示一个具体的操作，主要书写业务逻辑；

3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体