组件数据局部化处理

不管页面组件还是小组件，都可能会被多次复用

复用组件的原因，其实就是复用组件的页面结构、页面样式、页面逻辑

但是页面上的数据需要区分（被复用的两个组件数据多少是有区别的），所以组件的数据要做局部化处理

借助函数可以产生局部作用域的特点，为每一次复用组件产生一个独立的作用域

语法：
data () {
	return {
		// 数据们
	}
}

子组件

<template>
    <div class="beat" @click="count += 1">
        {{ count }}下
    </div>
</template>
<script>
    export default {
        name: "Beat",
        // 不管是页面组件还是小组件，都可能被复用，页面结构与样式都可以采用一套，但是数据一定要相互独立
        data () {
            return {
                count: 0
            }
        }
    }
</script>
<style scoped>
    .beat {
        width: 100px;
        height: 100px;
        background-color: orange;
        text-align: center;
        line-height: 100px;
        border-radius: 50%;
    }
</style>

父组件

<template>
    <div class="home">
        <Beat/>
        <Beat/>
    </div>
</template>
<script>
    import Beat from '@/components/Beat'
    export default {
        components: {
            Beat,
        }
    }
</script>

路由逻辑跳转

很多时候，我们需要通过普通按钮的逻辑，或是直接在某些逻辑中完成页面的跳转
可以通过在逻辑中用 this.$router.push() 来完成前往目标页，两种语法如下
- this.$router.push('路劲')
- this.$router.push({name: '路由名'})
在做移动端项目时，没有像浏览器那样的前进后台键，页可以用 this.$router.go() 来完成前进后退，语法如下
- 前进后退：this.$router.go(正负整数)，正式代表前进，负数代表后台，数值就是步长

案例：

<template>
    <div class="home">
        <Nav/>
        <h1>主页</h1>
        <button @click="goPage('/first')">前往第一页</button>
        |
        <button @click="goPage('/second')">前往第二页</button>
        |
        <button @click="goBack(-1)">后退一页</button>
        |
        <button @click="goBack(-2)">后退二页</button>
        |
        <button @click="goBack(1)">前进一页</button>
    </div>
</template>
<script>
    import Nav from '@/components/Nav'
    export default {
        methods: {
            goPage(path) {
                // 可以通过 this.$router 完成逻辑跳转
                this.$router.push();
            },
            goBack(num) {
                // 一般在移动端项目上运用
                this.$router.go(num);
            }
        },
        components: {
            Nav,
        }
    }
</script>

组件传参

父传子

在子组件内通过 props 设置组件的自定义属性
1. ```
props: ['abc', 'goods']
```

在父组件渲染子组件时对自定义属性赋值即可

<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>

子组件

<template>
    <div class="goods-box">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>
<script>
    export default {
        name: "GoodsBox",
        // 在组件内部通过props定义组件的自定义属性
        props: ['abc', 'goods'],
    }
</script>
<style scoped>
    .goods-box {
        width: 260px;
        height: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin: 20px;
        float: left;
        overflow: hidden;
        text-align: center;
    }
    img {
        width: 260px;
        height: 260px;
    }
</style>

父组件

<template>
    <div class="goods">
        <div class="main">
            <!-- 在使用子组件时对自定义属性赋值即可 -->
            <GoodsBox v-for="goods in goods_list" :key="goods" :goods="goods" />
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
    let goods_list = [
        {
            img: require('@/assets/img/001.jpg'),
            title: '小猫',
        },
        {
            img: require('@/assets/img/002.jpg'),
            title: '小猫儿',
        },
        {
            img: require('@/assets/img/003.jpg'),
            title: '小狗',
        },
        {
            img: require('@/assets/img/004.jpg'),
            title: '小狗儿',
        },
    ];
    export default {
        name: "Goods",
        data () {
            return {
                goods_list,
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>
{
            img: require('@/assets/img/1.jpeg'),
            title: '1号',
        },
        {
            img: require('@/assets/img/2.jpeg'),
            title: '2号',
        },
        {
            img: require('@/assets/img/3.jpg'),
            title: '3号',
        },
        {
            img: require('@/assets/img/4.jpeg'),
            title: '4号',
        },

子传父

前提：子组件是被父组件渲染的，所以子组件渲染要晚于父组件

子组件一定要满足一个条件，才能对父组件进行传参（某个时间节点 === 某个被激活的方法）
1. 子组件刚刚加载成功，给父组件传参
2. 子组件某一个按钮被点击的时刻，给父组件传参 iii）子组件要被销毁了，给父组件传参

在子组件满足条件激活子组件的方法中，对父组件发生一个通知，并将数据携带处理（自定义组件事件）

<div class="goods-box" @click="boxClick"></div>
    methods: {
        boxClick () { this.$emit('receiveData', this.goods.title, '第二个数据', '第三个数据') }
    }

在父组件渲染子组件时，为自定义事件绑定方法
1. ```
<GoodsBox @receiveData="recFn"/>
```
在父组件实现绑定方法时，就可以拿到子组件传参的内容（接收到了通知并在父组件中相应）
1. ```
recFn(title, data2, data3) {
        console.log('接收到了' + title);
    }
```

组件标签不能绑定系统定义的事件，没有意义，子组件的事件都是在自己内部完成

子组件

<template>
    <div class="goods-box" @click="boxClick">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>
<script>
    export default {
        props: ['abc', 'goods'],
        methods: {
            boxClick () {
                // 通知父级 - 自定义组件的事件
                this.$emit('receiveData', this.goods.title)
            }
        }
    }
</script>

父组件

<template>
    <div class="goods">
        <div class="main">
            <!-- 实现自定义事件，接收子组件通知的参数 -->
            <GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
    export default {
        name: "Goods",
        data () {
            return {
                goodsTitle: '哪个',
            }
        },
        methods: {
            recFn(title) {
                console.log('接收到了' + title);
                this.goodsTitle = title;
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>

组件的生命周期钩子

组件的生命周期：一个组件从创建到销毁的整个过程

生命周期钩子：在一个组件生命周期中，会有很多特殊的时间节点，且往往会在特定的时间节点完成一定的逻辑，特殊的事件节点可以绑定钩

注：钩子 - 提前为某个事件绑定方法，当满足这个事件激活条件时，方法就会被调用 | 满足特点条件被回调的绑定方法就称之为钩子
<template>
    <div class="goods">
        <Nav />
    </div>
</template>
<script>
    import Nav from "../components/Nav";
    export default {
        name: "Goods",
        components: {
            Nav,
        },
        beforeCreate() {
            console.log('该组件要被加载了')
        },
        created() {
            console.log('该组件要被加载成功了')
        },
        updated() {
            console.log('数据更新了')
        },
        destroyed() {
            console.log('该组件销毁了')
        }
    }
</script>

路由传参

通过 url 正则传递数据

设置

路由：path: '/goods/detail/:pk'		|   '/goods/:pk/detail/:xyz'
请求：'/goods/detail/任意字符'        |    '/goods/任意字符/detail/任意字符'

如何传

<router-link :to="`/goods/detail/${pk}`"></router-link>
this.$router.push(`/goods/detail/${pk}`)

如何取

this.$route对象是管理路由参数的，传递的参数会在this.$route.params字典中
this.$route.params.pk

通过 url 参数传递数据

设置

路由: path: '/goods/detail'
请求: '/goods/detail?pk=数据'

如何传

<router-link :to="`/goods/detail?pk=${pk}`"></router-link>
<router-link :to="{name:'GoodsDetail', query:{pk: pk}}"></router-link>
this.$router.push(`/goods/detail?pk=${pk}`)
this.$router.push({name:'GoodsDetail', query:{pk: pk}})

如何取

this.$route对象是管理路由参数的,传递的参数会在this.$route.query字典中
this.$route.query.pk

第一种

配置：router/index.js

const routes = [
    {
        path: '/goods/detail/:pk',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

传递： GoodsBox.vue

<router-link class="goods-box" :to="`/goods/detail/${goods.pk}`">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</router-link>
<!------------------- 或者 ------------------->
<div class="goods-box" @click="goDetail(goods.pk)">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</div>
<script>
    export default {
        name: "GoodsBox",
        methods: {
            goDetail (pk) {
                this.$router.push(`/goods/detail/${pk}`);
            }
        }
    }
</script>

接收：GoodsDetail.vue

<script>
    export default {
        name: "GoodsDetail",
        data () {
            return {
                pk: '未知',
            }
        },
        // 通常都是在钩子中获取路由传递的参数
        created() {
            this.pk = this.$route.params.pk || this.$route.query.pk;
        }
    }
</script>

第二种

配置：router/index.js

const routes = [
    {
        path: '/goods/detail',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

传递：GoodsBox.vue

<router-link class="goods-box" :to="`/goods/detail?pk=${goods.pk}`">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</router-link>
<!------------------- 或者 ------------------->
<div class="goods-box" @click="goDetail(goods.pk)">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</div>
<script>
    export default {
        name: "GoodsBox",
        methods: {
            goDetail (pk) {
                // this.$router.push(`/goods/detail?pk=${goods.pk}`);
                // 或者
                this.$router.push({
                    name: 'GoodsDetail',
                    query: {
                        pk,
                    }
                });
            }
        }
    }
</script>

接收：GoodsDetail.vue

<script>
    export default {
        name: "GoodsDetail",
        data () {
            return {
                pk: '未知',
            }
        },
        // 通常都是在钩子中获取路由传递的参数
        created() {
            this.pk = this.$route.params.pk || this.$route.query.pk;
        }
    }
</script>

全家配置自定义 CSS 与 js

global.css

html, body {
    margin: 0;
}
a {
    color: black;
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
}

settings.js

export default {
    base_url: 'https://127.0.0.1:8000'
}

main.js

//1) 配置全局css
import '@/assets/css/global.css'
// import global_css from '@/assets/css/global.css'  // 资源需要用变量保存,方便以后使用
// require('@/assets/css/global.css')
// let global_css = require('@/assets/css/global.css')  // 资源需要用变量保存,方便以后使用
// 2) 配置自定义js设置文件
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings;
// 在任何一个组件中的逻辑,可以通过 this.$settings访问settings.js文件的{}数据

总结：

"""
项目：
	环境；node -> npm -> cnpm -> vue/cli
	创建：vue create proj
	配置：配置npm启动项
	项目目录结构：依赖、环境、入口、核心代码们
组件：
	构成：template + script + style
	导入：import 别名 from '路径'
	父加子：1）导入 2）注册 3）使用
	组件数据：组件化处理 data(){ return {} }
	传参：父传子 - 自定义组件属性  |  子传父 - 自定义组件事件
	生命周期钩子：created() { //完成后台请求等 }
路由：
	根组件中的页面占位：<router-view />
	导航栏中的页面跳转：<router-link to=""></router-link>
	代码中的逻辑跳转：this.$router.push() | this.$router.go()
	路由传参：两种方式
	两个路由对象：
		this.$router - 控制路由跳转
        this.$route - 控制路由数据
"""

Vue 路由组件的更多相关文章

Vue路由组件vue-router
一.路由介绍 Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are ...
Vue 路由&组件懒加载（按需加载）
当打包构建应用时,Javascript 包会变得非常大,影响页面加载速度.使用Vue路由懒加载和组件懒加载可以提升页面加载速度,减少白屏时间,提升用户体验. 用法有如下三种:(路由懒加载与组件懒加载用 ...
vue路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...
vue 路由组件不重新加载
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
vue路由组件群
import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter) const first = { template: ...
vue路由异步组件案例
最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...
067——VUE中vue-router之使用transition设置酷炫的路由组件过渡动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
vue路由懒加载及组件懒加载
一.为什么要使用路由懒加载为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用常用的懒加载方式 ...

随机推荐

django的静态文件配置和路由控制
上一篇写到刚建完django项目,此时我登录页面中调用了js文件,执行后发现报错了找不到js这个文件目录结构如图所示: <!DOCTYPE html> <html lang=&qu ...
python匿名函数与三元运算
匿名函数匿名函数就是不需要显示式的指定函数名首先看一行代码: def calc(x,y): return x*y print(calc(2,3)) # 换成匿名函数 calc = lambda ...
Python 命令行参数的输入方式（使用pycharm）
形式一: 第一个红色框为命令行参数第二个框为控制台模式(Terminal) 形式二点击运行:点击红色框编辑配置如下图:红色框即为设置的命令行参数
兵贵神速！掌握这10个Python技巧，让你代码工作如鱼得水
主题 Python 1000个读者心中有1000个哈姆雷特,要问1000个程序员“什么才是最好的语言”,Java.Python.PHP.C++ 也都有自己的位置.但要问编程语言流行指数之王非,那真的非 ...
关于OSPF LSA不稳定！
Issue 1 Solution It is important that you understand the error message during attempts to troublesho ...
转专业后对于C语言补修的一些体会(2)
第三章,有以下几个比较重要的点: 1. 强制类型转换. 强制类型转换是C语言中一个十分重要的工具,在C语言的使用中,有很多需要用到强制类型转换的地方,比如在除法中,如果想要得到正确的浮点结果,一般要确 ...
Pipenv & 虚拟环境
本教程将引导您完成安装和使用 Python 包. 它将向您展示如何安装和使用必要的工具,并就最佳做法做出强烈推荐.请记住, Python 用于许多不同的目的.准确地说,您希望如何管理依赖项可能会根据 ...
org.apache.commons.dbcp.SQLNestedException: Cannot create PoolableConnectionFactory (Unknown database 'jdsc')
org.apache.commons.dbcp.SQLNestedException: Cannot create PoolableConnectionFactory (Unknown databas ...
Win Tomcat8 占用内存过高
1.解压版找到tomcat/bin/catalina.bat 文件,修改对应参数 2.安装版 windows服务执行的是bin/tomcat.exe.他读取注册表中的值,而不是catalina.ba ...
iOS马甲包上架总结
https://www.jianshu.com/p/da0a259338ea iOS马甲包上架首先明白一点,这个上架的app马甲包一定是不合规的.不然也不会使用马甲包上架. 上架过程中遇到的坑. 因为 ...

Vue 路由组件

组件数据局部化处理

路由逻辑跳转

组件传参

父传子

父组件

子传父

组件的生命周期钩子

路由传参

全家配置自定义 CSS 与 js

总结：

Vue 路由组件的更多相关文章

随机推荐

热门专题