vue.js 核心知识点六
目录
- 6.1 父组件异步获取动态数据传递给子组件
- 6.2 vue-cli中自定义指令的使用
- 6.3 vue弹窗后如何禁止滚动条滚动？
- 6.4 vue提供的几种脚手架模板
- 6.1 父组件异步获取动态数据传递给子组件
模拟异步
父组件
<template>
<div>
父组件
<child :child-data="asyncData" ></child>
</div>
</template>
<script>
import child from './child'
export default {
data(){
return {
asyncData:''
}
},
components: {
child
},
created() {
// setTimeout模拟异步数据
setTimeout(() => {
this.asyncData = 'async data'
this.asyncObject = {'items': [1, 2, 3]} 第二种情况
console.log('parent finish')
}, 1000)
}
}
</script>
子组件
<template>
<div>
子组件{{childData}}
第二种
子组件<p>{{childObject.items[0]}}</p>
这里很常见的一个问题，就是{{childObject}}可以获取且没有报错，
但是{{childObject.items[0]}}不行，往往有个疑问为什么前面获取到值，后面获取不到呢？
</div>
</template>
<script>
export default {
props: ['childData'],
data: () => ({
}),
created () {
console.log(this.childData) //空值
console.log(this.childObject) // 空值
},
methods: {
}
}
</script>
// 首先传过来的是空，然后在异步刷新值，也开始时候childObject.items[0]等同于''.item[0]这样的操作，
所以就会报下面的错
vue.esm.js?8910:434 [Vue warn]: Error in render function:
"TypeError: Cannot read property '0' of undefined"
问题描述
父组件获取异步数据，并传递给子组件，直接显示没有问题，若对数据进行处理，则拿到的数据都是父组件初始值。
原因
父组件 获取异步数据 还没等到数据返回 子组件 created已经执行完毕
父子组件的生命周期
image
解决
- 方法一 使用v-if可以解决报错问题，和created为空问题
父组件
<child :child-data="asyncData" v-if="asyncData"></child>
当asyncData有值得时候，在加载子组件
- 方法二 子组件使用watch来监听父组件改变的prop，使用methods来代替created
子组件
watch:{
childData(val){
this.flGoods = val;
console.log('子组件 数据处理',val)
this.updata()
}
},
methods: {
updata () { // 既然created只会执行一次，但是又想监听改变的值做其他事情的话，只能搬到这里咯
console.log(this.test)// 1
}
}
- 方法三：在父组件里用Promise方法异步执行数据的赋值：
new Promise((resolve,reject) => {
if (res.status === 200){
resolve(res);
}
}).then((res) => {
this.category = res.data.data.category;
this.adBar = res.data.data.advertesPicture.PICTURE_ADDRESS;
this.bannerSwipePics = res.data.data.slides
this.recommendGoods = res.data.data.recommend;
// 也可异步获取再传给子组件 Promise
this.floorSeafood = res.data.data.floor1;
this.floorBeverage = res.data.data.floor2;
this.floorFruits = res.data.data.floor3;
console.log(this.floorFruits);
this._initScroll();
})
}).catch(err => {
console.log(err);
});
这样也是可以的，异步获取数据导致的报错的情况会在各个场景出现，比如根据数据渲染dom，而对dom有js操作的时候，会因为还没渲染出来而找不到响应的dom元素报错，这里可以用vue提供的$nextTick()函数，或者手动开个setTimeout定时器，延迟获取；使用better-scroll的时候因为dom没有渲染出来而无法获取滚动元素的高度，导致无法滚动，同样可以用vue提供的这个函数，等dom渲染完了后再初始化滚动。
- 方法四 ：子组件watch computed data 相结合
parent.vue
<template>
<div>
父组件
<child :child-object="asyncObject"></child>
</div>
</template>
<script>
import child from './child'
export default {
data: () => ({
asyncObject: undefined
}),
components: {
child
},
created () {
},
mounted () {
// setTimeout模拟异步数据
setTimeout(() => {
this.asyncObject = {'items': [1, 2, 3]}
console.log('parent finish')
}, 2000)
}
}
</script>
child.vue
<template>
<div>
<p>{{test}}</p>
</div>
</template>
<script>
export default {
props: ['childObject'],
data: () => ({
test: ''
}),
watch: {
'childObject.items': function (n, o) {
this._test = n[0]
}
},
computed: {
_test: {
set (value) {
this.update()
this.test = value
},
get () {
return this.test
}
}
},
methods: {
update () {
console.log(this.childObject) // {items: [1,2,3]}
}
}
}
</script>
- 方法五 ：使用emit，on，bus相结合
parent.vue
<template>
<div>
父组件
<child></child>
</div>
</template>
<script>
import child from './child'
export default {
data: () => ({
}),
components: {
child
},
mounted () {
// setTimeout模拟异步数据
setTimeout(() => {
// 触发子组件，并且传递数据过去
this.$bus.emit('triggerChild', {'items': [1, 2, 3]})
console.log('parent finish')
}, 2000)
}
}
</script>
child.vue
<template>
<div>
子组件
<p>{{test}}</p>
</div>
</template>
<script>
export default {
props: ['childObject'],
data: () => ({
test: ''
}),
created () {
// 绑定
this.$bus.on('triggerChild', (parmas) => {
this.test = parmas.items[0] // 1
this.updata()
})
},
methods: {
updata () {
console.log(this.test) // 1
}
}
}
</script>
这里使用了bus这个库，parent.vue和child.vue必须公用一个事件总线（也就是要引入同一个js，这个js定义了一个类似let bus = new Vue()的东西供这两个组件连接），才能相互触发
- 方法六：使用prop default来解决{{childObject.items[0]}}
parent.vue
<template>
<div>
父组件
<child :child-object="asyncObject"></child>
</div>
</template>
<script>
import child from './child'
export default {
data: () => ({
asyncObject: undefined // 这里使用null反而报0的错
}),
components: {
child
},
created () {
},
mounted () {
// setTimeout模拟异步数据
setTimeout(() => {
this.asyncObject = {'items': [1, 2, 3]}
console.log('parent finish')
}, 2000)
}
}
</script>
child.vue
<template>
<div>
子组件<!--1-->
<p>{{childObject.items[0]}}</p>
</div>
</template>
<script>
export default {
props: {
childObject: {
type: Object,
default () {
return {
items: ''
}
}
}
},
data: () => ({
}),
created () {
console.log(this.childObject) // {item: ''}
}
}
</script>
- 其他方法
将数据存到store，子组件监听数据变化（watch/computed）
大概逻辑：使用vuex全局状态管理,其实简单，
利用vuex的辅助函数（mapState，mapMutations）
mapState是将state里面的数据映射到计算中（computed），
mapMutations也是类似，把vuex中mutations的方法映射到组件里面，
就可以在组件里面直接使用方法了,
在vuex中使用异步（actions）去掉用接口，
然后在接口成功的函数里面取触发同步（mutations）里面的方法,
把得到数据传给mutations里面的方法里并且给state里面的属性赋值，
然后就可以在子组件中使用computed计算中去获取数据并且渲染到页面上，
其实说的有点绕( -_-")，但是看代码就明白了 。
vuex / index.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
//定义初始数据
state: {
title: '',
list: [],
isShow: false
},
//同步的方法
mutations: {
//向state 里面设置数据
changeListMutation(state, list) {
state.list = list
},
//在list.vue里面点击下拉选项的时候触发 给state.title赋值
changeTitleMutation(state, title) {
state.title = title
},
//selectinput.vue里面点击input的时候触发 给state.isShow赋值
toggleShow(state, isShow) {
state.isShow = isShow
}
},
//异步的方法
actions: {
//在list.vue里面created生命周期里面触发
getListAction({ commit }) {
axios.get('/mock/5afd9dc0c088691e06a6ab45/example/dataList')
.then((res) => {
commit('changeListMutation', res.data) //调用mutations下面的changeListMutation方法并且传值过去
})
.catch((error) => {
console.log(error)
})
}
}
})
// 触发异步里面的方法是用 this.$store.dispatch('这里是方法名')
// 触发同步里面的方法是用 this.$store.commit('这里是方法名')
父组件 select.vue
<template>
<div class="select">
<div class="wrap">
<selectInput></selectInput>
<list></list>
</div>
</div>
</template>
<script>
// 引入子组件
import selectInput from '@/components/selectInput'
import list from '@/components/list'
export default {
components:{ //加载子组件
selectInput,
list
},
}
</script>
<style>
.select{
background:#4a56fe;
width: 400px;
margin: 100px auto 0;
padding: 40px;
border-radius: 10px;
}
.wrap{
background: #e3e5fe;
border-radius: 10px;
padding: 40px;
}
ul{
list-style: none;
}
</style>
子组件 list.vue
<template>
<div class="list">
<ul>
<li v-for="(item,index) in list" :key="index" v-show="initShow" @click="changeTitle(item.title)">{{item.title}}</li>
</ul>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex' // 将vuex中的state数据和mutations中的方法映射到组件中
export default {
//vue 生命周期（created）在实例创建之后，在数据初始化之前被调用
created(){
this.$store.dispatch('getListAction') //调用vuex 中的 getListAction异步方法
},
//计算state数据
computed:{
...mapState({
list:'list',
initShow:'isShow'
})
},
methods:{
changeTitle(title){
this.$store.commit('changeTitleMutation',title)
this.$store.commit('toggleShow',!this.initShow)
}
}
}
</script>
<style>
.list{
padding: 10px 0;
text-align: center;
}
li{
line-height: 30px;
height: 30px;
border-radius: 15px;
cursor: pointer;
color:#535353;
}
li:hover{
background: #ff705b;
color: #fff;
}
</style>`
子组件selectInput.vue
<template>
<div class="inputBox">
<input type="text" readonly :value="getTitle" @click="toggleShow" placeholder="你喜欢什么">
</div>
</template>
<script>
export default {
computed:{
// 获取vuex中的state数据并赋值绑定到 value上面 computed 里面的方法名其实就是相当于 data里面的数据，可以用this.getTitle 去访问
getTitle(){
return this.$store.state.title
},
// 初始化控制下拉选项显示隐藏的状态，如果isShow是false 则不限是下拉菜单，默认是false
initShow(){
return this.$store.state.isShow
}
},
methods:{
//点击input的时候调用该方法，这个方法去触发mutations下面的toggleShow，去改变isShow的状态，默认是isShow等于false, 然后在点击的时候去改变isShow 等于true , !this.initShow就是true，如果是true的话，下拉选项才能出来,并将改变过后的值传给toggleShow方法，去给vuex/store.js 里面的state.isShow赋值。
toggleShow(){
this.$store.commit('toggleShow',!this.initShow)
}
}
}
</script>
<style>
input{
outline: none;
width: 100%;
height: 40px;
line-height: 40px;
border-radius: 10px;
border: 1px solid #d3d3d3;
text-indent: 20px;
color: #535353;
}
</style>
参考 https://www.jb51.net/article/117447.htm
- 6.2 vue-cli中自定义指令的使用
vue中除了内置的指令（v-show,v-model）还允许我们自定义指令
想要创建自定义指令，就要注册指令（以输入框获取焦点为例） 注意：autofocus 在移动版 Safari 上不工作
一、注册全局指令：
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el,binding) {
// 当前指令绑定的dom元素
//console.log(el);
// 指令传入的参数、修饰符、值 v-指令名称:参数.修饰符=值
// console.log(binding)
// 聚焦元素
el.focus()
}
})
二、注册局部指令： 组件中也接受一个 directives 的选项
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
使用也很简单：直接在元素上面使用v-focus即可：
<input type="text" v-focus/>
下面再举一个自定义指令的小例子：拖拽
Vue.directive('drag', {
// 当指令绑定到元素上的时候执行
bind(el, binding) {
// console.log('bind');
// 当前指令绑定的dom元素
//console.log(el);
// 指令传入的参数、修饰符、值 v-指令名称:参数.修饰符=值
// console.log(binding)
el.onmousedown = function(e) {
var e = e||event;
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop;
document.onmousemove = function(e) {
var e = e||event;
let L = e.clientX - disX;
let T = e.clientY - disY;
if (binding.modifiers.limit) {
if (L < 0) {
L = 0;
}
}
el.style.left = L + 'px';
el.style.top = T + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
};
return false;
}
}
});
使用也很简单，只用在元素上添加v-drag或者v-drag.limit
<div id="div1" v-drag.limit></div>
<div id="div2" v-drag></div>
- 6.3vue弹窗后如何禁止滚动条滚动？
/***滑动限制***/
stop(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
/***取消滑动限制***/
move(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove",mo,false);
}
function toggleBody(isPin){
if(isPin){
document.body.style.height = '100vh'
document.body.style['overflow-y'] = 'hidden'
}
else{
document.body.style.height = 'unset'
document.body.style['overflow-y'] = 'auto'
}
}
toggleBody(1) //在跳出弹窗的时候
toggleBody(0) //弹窗消失的时候
超长的页面怎么办呢
上面直接限制body固然有效，但如果一个页面很长很长，超出了100vh，而我正好滚到中间时弹出弹窗。此时若直接限制body的overflow: hidden则会让页面一下弹到顶部，显然不是好的做法。那么，又该怎么做呢？
对移动端，可以引入touch-action，限制为none，在弹窗消失时再变回auto。但ios的safari上不支持该属性（可以去caniuse上查查，起码2018.11的时候还不支持）。如果我们的app在ios上用的是safari内核，就起不到效果了。
这时候，就需要结合event.preventDefault属性来用了。注意在绑定addEventListener的时候，需要多传一个options，强调这个事件不是passive的，否则谷歌等新版浏览器会报错。同时最好也指定capture: true，这样可以早点禁止该事件。
报错是Unable to preventDefault inside passive event listener due to target being treated as passive.。这是因为谷歌从chrome51之后引入的新优化。事实上，谷歌建议一般情况下，将 passive 标志添加到每个没有调用 preventDefault() 的 wheel、mousewheel、touchstart 和 touchmove 事件侦听器。但是，对于这种禁止了默认事件的eventListener，在这种情况下，反而是要强调它不是消极监听的。因为滚动都不能滚了，无所谓什么优化了。
代码如下（vue版本的）：
watch: {
show(v) {
this.toggleContainerTouchAction(v)
if (v) {
document.body.addEventListener('touchmove', this.stopTouch, { passive: false, capture: true })
} else {
document.body.removeEventListener('touchmove', this.stopTouch, { capture: true })
}
},
},
methods: {
toggleContainerTouchAction(v) {
const container = document.querySelector('.container')
if (!container) {
return
}
container.style['touch-action'] = v ? 'none' : 'auto'
},
stopTouch(e) {
e.preventDefault()
},
- 6.4 vue提供的几种脚手架模板
vue-cli 的脚手架项目模板有browserify 和 webpack , 现在自己在用的是webpack , 官网给出了两个模板： webpack-simple 和 webpack 两种。两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能，普通项目基本用webpack-simple 就足够了.
搭建官方项目模板步骤：
1、npm install vue-cli (安装vue-cli ) 有的时候有看到其它两种写法: --save-dev 和 --save的写法。这两个有一定的区别，我们都知道package.json 中有一个 “dependencies” 和 “devDependencies” 的。dependencies 是用在开发完上线模式的，就是有些东西你上线以后还需要依赖的，比如juqery , 我们这里的vue 和 babel-runtime（Babel 转码器 可以将ES6 转为ES5 ）， 而devDependencies 则是在开发模式执行的，比如我们如果需要安装一个node-sass 等等。有的时候看到package.json中安装的模块版本号前面有一个波浪线。例如: ~1.2.3 这里表示安装1.2.x以上版本。但是不安装1.3以上。
2、vue init webpack-simple yourdemoname 下载一个webpack-simple项目，这里的webpack-simple 是固定的，也就是官网的项目模板。youdemoname 这个是你自己项目的名字。 执行这个步骤以后。就会弹出询问 “项目名称..项目描述“等等问题 直接按照提示操作。这个时候对应的项目目录下就出现刚刚建立的项目了。
3、我们还需要把项目的依赖下载下来。使用命令: cd youdemoname 然后执行npm install 就可以了，这个时候你的项目中有多了一个node_modules 目录
4、使用"npm - run - dev" 命令来运行项目 "npm-run-bulid" 来执行发布，会自动生成dist文件
