父子组件传值以及vue路由的使用
父组件传值给子组件
设置props属性接收父组件传值:如果传递的值是字符串类型或者数字类型的需要在props里说明一下
如图 name是自己定义的一个属性名,需要将它当做属性名写在子组件中,而父组件要传递的值就是属性值。图中是需要设置的默认值,如果子组件中不传参,就默认传中的参数
子组件传值给父组件
子组件调用父组件的方法:
在父组件中给引用的子组件注册一个事件(这个事件的名字是自定义的)
子组件可以触发这个事件$emit('事件名字')
子组件给父组件传递数据:
$emit方法第二个参数可以定义子组件给父组件传递的内容
在父组件中怎么拿到这内容:
ref的使用
给dom节点记上ref属性,可以理解为给dom节点起了个名字
加上ref之后,在$refs属性中多了这个元素的引用
通过vue实例的$refs属性拿到这个dom元素
给组件记上ref属性,可以理解为给组件起了个名字
加上ref之后,在$refs属性中多了这个组件的引用
通过vue实例的$refs属性拿到这个组件的引用,之后可以通过这个引用调用子组件的方法,或者获取子组件的数据
vue中路由的使用 什么是路由?
后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源
前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;
在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由)。
路由的基本使用:
引入js文件,这个js需要放在vue的js后面,自动安装(提供了一个的构造方法)
创建路由(),接受的参数是一个对象
在实例化的对象里配置属性:[],这个数组里的对象包含path属性和属性
path属性是url的地址,属性就是显示的组件(传组件的对象)
创建的路由需要和vue实例关联一下
路由到的组件显示在哪个位置
如图:
路由的跳转:
-link标签可以设置to属性。
可以通过query的方式在url后加?参数名=参数的值
获取参数:$route.query.参数名
如图:
2.使用浏览器参数的方式传递参数
组件的嵌套
声明路由的时候设置,这是是一个数组,数组里是路由对象
这个的组件就会渲染在它父组件的中
命名视图
我们之前只能一个地址对应一个组件,现在可以一个地址对应多个组件
属性设置的
给-view设置名字,这个名字和组件名字是对应的
设置默认值对应组件可以设置名字也可以访问
计算属性和监听器
Watch和用法:
、和watch的区别:
属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加();
方法表示一个具体的操作,主要书写业务逻辑;
watch一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是和的结合体