Vue-笔记（5）

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 }
            ]
        }
    ]
});