1、父子组件数据传递
父组件可在引用子组件时, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用。
<com1 v-bind:parentmsg="msg"></com1>
(1)子组件中,默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
(2)子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件自身私有的
子组件通过 Ajax ,请求回来的数据,都可以放到 data 身上;
(3)组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的 props 中的数据,都是只读的,无法重新赋值
2、父子组件方法传递
(1)父组件向子组件 传递 方法,使用的是 事件绑定机制; v-on, 当我们自定义了 一个 事件属性之后,那么,子组件就能够,通过某些方式,来调用 传递进去的 这个 方法了。
(2)
<com2 @func="show"></com2>
var vm = new Vue({
el: '#app',
data: { ... },
methods: {
show(data){ ... }
},
components: {
com2
// com2: com2
}
});
var com2 = {
template: '...',
data(){
return { ... };
},
methods: {
myclick(){
this.$emit('func', '参数'); // emit 英文原意: 是触发,调用、发射的意思
}
}
};
3、localStorage 只支持存放字符串数据。
4、ref 获取DOM元素和组件
ref 是 英文单词 【reference】 值类型 和 引用类型 referenceError
<h3 id="myh3" ref="myh3">哈哈哈, 今天天气太好了!!!</h3>
console.log(this.$refs.myh3.innerText);
5、路由
(1)装 vue-router 路由模块
(2)router-link 默认渲染为一个 a 标签
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
(3)router-view
router-view --> vue-router 提供的元素,专门用来 当作占位符的,将来,路由规则,匹配到的组件,就会展示到这个 router-view 中去,所以可把 router-view 当做一个占位符。
<transition mode="out-in">
<router-view></router-view>
</transition>
(4)创建一个路由对象,当导入 vue-router 包之后,在 window 全局对象中,就有了一个 路由的构造函数,叫做 VueRouter。
在 new 路由对象的时候,可以为 构造函数,传递一个配置对象。
// 组件的模板对象
var login = {
template: '<h1>登录组件</h1>'
};
var register = {
template: '<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
routes: [ // 路由匹配规则
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
// path --> 表示监听 哪个路由链接地址;
// component --> path对应展示的组件,component 的属性值,必须是一个 组件的模板对象, 不能是 组件的引用名称。
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: routerObj // 将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件
});
(5)如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性
<router-link to="/login?id=10&name=zs">登录</router-link>
<!-- $route.query、$route.params -->
(6)如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性
// 使用
<router-link to="/login/12/ls">登录</router-link>
// 路由配置规则
{ path: '/login/:id/:name', component: login },
(7)路由的嵌套
使用 children 属性,实现子路由,同时,子路由的 path 前面,不要带 / ,否则永远以根路径开始请求,这样不方便我们用户去理解URL地址。
<router-link to="/account">Account</router-link>
<router-view></router-view>
<template id="tmpl">
。。。
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
。。。
</template>
var router = new VueRouter({
routes: [
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
}
]
});