需求由来： 公司项目外链到别公司项目或者网页（通俗的说就是通过别的随意网页跳转至你项目网页），这时公司项目就要区分是从哪个公司或者哪个网页跳转过来的，从而进行不同的接口请求（公司所有接口都要带上请求头）。大部分做法都是设置请求头来区分。做法如下： 废话不多说 直接上代码 通俗易懂： 新建一个配置文件requst.js 内容如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import axios from 'axios'; // 设置公共请求头 const init = function () { let url = window.location.search.toString() // 获取外链过来的连接参数部分 let arr = [] let obj = {} // 预封装集合 arr = url.split('&') // 对参数切割处理 在封装 arr.forEach(l => { l = l.split('=') obj[l[0]] = l[1] }) // 具体有哪些参数看你们后台定义了哪些 下面的参数有 osType、deviceId、deviceChannel、language ..... axios.defaults.headers.common['deviceChannel'] = 'gclife_bmp_pc'; axios.defaults.headers.common['language'] = window.localStorage.defaultLanguage; // 有则赋值 obj.osType ? axios.defaults.headers.common['osType'] = obj.osType : axios.defaults.headers.common['osType'] = ''; obj.deviceId ? axios.defaults.headers.common['deviceId'] = obj.deviceId : axios.defaults.headers.common['deviceId'] = ''; . . . } export default { init } |
接下来就是在main.js引入就行了 如下：
|
1 2 3 |
// 引入请求头文件 import request from './request' request.init() // 请求头初始化 |
上诉内容就是设置公共请求头的内容了。 from:https://www.cnblogs.com/ljx20180807/p/9766699.html
View Details方法一（常规） 父组件传递数据到子组件； 子组件将数据转成本地数据
|
1 2 3 4 5 6 |
props: ['name'], data() { return { iName: this.name } }, |
但是此时，父组件如果更新了name 值，但是子组件中的 iName 不会随之更改；所以要监听父组件传入数据的变化，随之更新子组件；
|
1 2 3 4 5 6 |
watch: { // 监听父组件传入的数据，更新到本地 name(newVal, oldVal){ this.iName = newVal; } }, |
此时，父组件更新 name ，子组件展示出来的数据（iName）会随之变化，但是子组件修改数据，父组件不会变化，所以需要监听子组件数据（iName）的变化，通知父组件进行更新
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 子组件中的监听 watch: { // 监听父组件传入的数据，更新到本地 name(newVal, oldVal){ this.iName = newVal; }, // 监听本地数据的变化，通知父组件更新 iName(newVal, oldVal) { this.$emit('update', newVal); } }, // 父组件中的更新 <test :name="name" @update="update"/> methods: { update(str) { this.name = str; } }, |
方法二（自定义 v-model 双向数据绑定） 自定义组件中使用 v-model 进行双向数据绑定，相当于；
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<test v-model="selected" /> 相当于 <test :value="selected" @input="data=> selected=data"/> 所以子组件需要做的事情就是 1. 接收 value 数据 props: ['value'], 2. 将value 转成本地数据 data() { return { checked: this.value } }, 3. 监听 value 的变化，更新到本地数据， 监听 本地数据的变化，使用 input 事件通知父组件更新 watch: { value(newVal){ this.checked = newVal; }, checked(newVal){ this.$emit('input', newVal) } }, |
方法三（.sync 修饰符）
|
1 |
<input :title.sync="xx"/> |
拆开后
|
1 |
<input @update:title="data => xx=data" :title="xx"/> |
from:https://blog.csdn.net/qq_39125684/article/details/90380268
View Details