Vue 05

一 ,父组件向子组件传值

父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用

注意: 组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的  props 中的数据,都是只读的,无法重新赋值

二,父组件向子组件传方法

父组件向子组件 传递 方法,使用的是 事件绑定机制; v-on, 当我们自定义了 一个 事件属性之后,那么,子组件就能够,通过某些方式,来调用 传递进去的 这个 方法了

当点击子组件的按钮的时候,如何 拿到 父组件传递过来的 func 方法,并调用这个方法??   emit 英文原意: 是触发,调用、发射的意思    this.$emit('func123', 123, 456)

三,相关案例

五,路由基本使用

这是 vue-router 提供的元素,专门用来 当作占位符的,将来,路由规则,匹配到的组件,就会展示到这个 router-view 中去   所以: 我们可以把 router-view 认为是一个占位符 

router-link 默认渲染为一个a 标签    tag改变标签的属性

六,路由规则中定义参数

如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性 连接?&符号

第二种

用params获取值

七,路由镶嵌

使用 children 属性,实现子路由,同时,子路由的 path 前面,不要带 / ,否则永远以根路径开始请求,这样不方便我们用户去理解URL地址

八,路由实现经典布局

css样式
主体及js部分

default默认第一个显示元素,这里component后面要加s

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天,给大家介绍一下组件! A:组件:(component); 1.什么是组件? 组件是vue.js最强大的功能之...
    OrangeQjt阅读 276评论 0 0
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 25,905评论 1 12
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,377评论 0 3
  • 一、 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组...
    饥人谷_Leonardo阅读 2,019评论 0 18
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29