组件数据局部化处理 路由逻辑跳转 组件传参 父传子 子传父 组件的生命周期钩子 路由传参 全家配置自定义 CSS 与 js

Posted 2020-11-25 godlover

目录

组件数据局部化处理
路由逻辑跳转
组件传参
父传子
子传父
组件的生命周期钩子
路由传参
全家配置自定义 CSS 与 js
总结：
组件数据局部化处理
不管页面组件还是小组件，都可能会被多次复用
复用组件的原因，其实就是复用组件的 页面结构、页面样式、页面逻辑
但是页面上的数据需要区分（被复用的两个组件数据多少是有区别的），所以组件的数据要做局部化处理
借助函数可以产生局部作用域的特点，为每一次复用组件产生一个独立的作用域
语法：

data () {
return {
// 数据们
}
}
子组件

父组件

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

组件传参
父传子
在子组件内通过 props 设置组件的自定义属性

props: [‘abc‘, ‘goods‘]
在父组件渲染子组件时对自定义属性赋值即可

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

子组件

父组件

{
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号‘,
},

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

子组件一定要满足一个条件，才能对父组件进行传参（某个时间节点 === 某个被激活的方法）

子组件刚刚加载成功，给父组件传参
子组件某一个按钮被点击的时刻，给父组件传参 iii）子组件要被销毁了，给父组件传参
在子组件满足条件激活子组件的方法中，对父组件发生一个通知，并将数据携带处理（自定义组件事件）

methods: {
    boxClick () { this.$emit('receiveData', this.goods.title, '第二个数据', '第三个数据') }
}

在父组件渲染子组件时，为自定义事件绑定方法

<GoodsBox @receiveData="recFn"/>
在父组件实现绑定方法时，就可以拿到子组件传参的内容（接收到了通知并在父组件中相应）

recFn(title, data2, data3) {
console.log(‘接收到了‘ + title);
}
组件标签不能绑定系统定义的事件，没有意义，子组件的事件都是在自己内部完成

子组件

父组件

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

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

注：钩子 - 提前为某个事件绑定方法，当满足这个事件激活条件时，方法就会被调用 | 满足特点条件被回调的绑定方法就称之为钩子

路由传参
通过 url 正则传递数据

设置

路由：path: ‘/goods/detail/:pk‘ | ‘/goods/:pk/detail/:xyz‘
请求：‘/goods/detail/任意字符‘ | ‘/goods/任意字符/detail/任意字符‘
如何传

<router-link :to="/goods/detail/${pk}">
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 :to="{name:‘GoodsDetail‘, query:{pk: pk}}">

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="">

{{ goods.title }}

{{ goods.title }}

接收：GoodsDetail.vue

第二种

配置：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="">

{{ goods.title }}

{{ goods.title }}

接收：GoodsDetail.vue

全家配置自定义 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文件的{}数据

以上是关于组件数据局部化处理 路由逻辑跳转 组件传参 父传子 子传父 组件的生命周期钩子 路由传参 全家配置自定义 CSS 与 js的主要内容，如果未能解决你的问题，请参考以下文章

vue初始化数据处理组件传参路由传参全局定义CSS与JS组件生命周期

前端Vue框架 04 路由：逻辑跳转路由传参 项目组件的数据局部化处理data(){ return{} } 组件的声明周期 组件间通信 各种第三方插件(vuex,axios,ele(

Vue组件间传值（超全，跨代）父传子，子传父，爷传孙，孙传爷，保姆级讲解

Vue组件之间的传参

VUE_03 组件化思想全局|局部注册组件之间传值(父传子子传父兄弟传兄弟)匿名|具名|作用域插槽

父子组件传参 关于 .sync修饰符等用法