父组件向子组件传值

1.组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据

1.使用v-bind或简化指令，将数据传递到子组件中：

子组件向父组件传值

1.原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；

2.父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

1.子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

使用 this.$refs 来获取元素和组件

什么是路由

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

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

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

在 vue 中使用 vue-router

1.导入 vue-router 组件类库：

<script src="./lib/vue-router-2.7.0.js"></script>

2.使用 router-link 组件来导航

<router-link to="/login">登录</router-link>

<router-link to="/register">注册</router-link>

3.使用 router-view 组件来显示匹配到的组件

<router-view></router-view>

4.创建使用Vue.extend创建组件

// 4.1 使用 Vue.extend 来创建登录组件

var login = Vue.extend({

template: '<h1>登录组件</h1>'

});

// 4.2 使用 Vue.extend 来创建注册组件

var register = Vue.extend({

template: '<h1>注册组件</h1>'

});

5.创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则

// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则

var router = new VueRouter({

routes: [

{ path: '/login', component: login },

{ path: '/register', component: register }

]

});

6.使用 router 属性来使用路由规则

// 6. 创建 Vue 实例，得到 ViewModel

var vm = new Vue({

el: '#app',

router: router // 使用 router 属性来使用路由规则

});

父子组件传值、ref、vue-router的定义与使用