vue核心知识——组件篇
1.vue中子组件调用父组件的方法
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。
-
<template>
-
<div>
-
<child>
</child>
-
</div>
-
</template>
-
<script>
-
import child
from
'./child';
-
export
default {
-
components: {
-
child
-
},
-
methods: {
-
fatherMethod(str) {
-
console.log(str);
-
}
-
}
-
};
-
</script>
-
<template>
-
<div>
-
<button @click="childMethod">点击
</button>
-
</div>
-
</template>
-
<script>
-
export
default {
-
methods: {
-
childMethod() {
-
this.$parent.fatherMethod(
'hello');
-
}
-
}
-
};
-
</script>
第二种是父组件把方法传入子组件中，在子组件里直接调用这个方法。
-
<template>
-
<div>
-
<child :fatherMethod="fatherMethodOther">
</child>
-
</div>
-
</template>
-
<script>
-
import child
from
'./child';
-
export
default {
-
components: {
-
child
-
},
-
methods: {
-
fatherMethodOther(str) {
-
console.log(str);
-
}
-
}
-
};
-
</script>
-
<template>
-
<div>
-
<button @click="childMethod">点击
</button>
-
</div>
-
</template>
-
<script>
-
export
default {
-
props: {
-
fatherMethod: {
-
type:
Function,
-
default:
null
-
}
-
},
-
methods: {
-
childMethod() {
-
if (
this.fatherMethod) {
-
this.fatherMethod(
'hello');
-
}
-
}
-
}
-
};
-
</script>
第三种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
-
<template>
-
<div>
-
<child @fatherMethod="fatherMethodOther">
</child>
-
</div>
-
</template>
-
<script>
-
import child
from
'./child';
-
export
default {
-
components: {
-
child
-
},
-
methods: {
-
fatherMethodOther(str) {
-
console.log(str);
-
}
-
}
-
};
-
</script>
-
<template>
-
<div>
-
<button @click="childMethod">点击
</button>
-
</div>
-
</template>
-
<script>
-
export
default {
-
methods: {
-
childMethod() {
-
this.$emit(
'fatherMethod',
'hello');
-
}
-
}
-
};
-
</script>
2.vue中父组件调用子组件的方法
父组件利用ref属性操作子组件方法。
-
<template>
-
<div>
-
<button @click="clickParent">点击
</button>
-
<child ref="mychild">
</child>
-
</div>
-
</template>
-
-
<script>
-
import Child
from
'./child';
-
export
default {
-
name:
"parent",
-
components: {
-
child: Child
-
},
-
methods: {
-
clickParent() {
-
this.$refs.mychild.parentHandleclick(
"嘿嘿嘿");
-
}
-
}
-
}
-
</script>
-
<template>
-
<div>
-
child
-
</div>
-
</template>
-
-
<script>
-
export
default {
-
name:
"child",
-
props:
"someprops",
-
methods: {
-
parentHandleclick(e) {
-
console.log(e)
-
}
-
}
-
}
-
</script>
注意：
1、在子组件中：<div></div>是必须要存在的
2、在父组件中：首先要引入子组件 import Child from './child';
3、 <child ref="mychild"></child>是在父组件中为子组件添加一个占位，ref="mychild"是子组件在父组件中的名字
4、父组件中 components: { child: Child }, 是声明子组件在父组件中的名字
5、在父组件的方法中调用子组件的方法，很重要 this.$refs.mychild.parentHandleclick("微信搜索全栈开发程序猿");
3.vue组件之间传值
https://www.cnblogs.com/barryzhang/p/10566515.html
(1)父组件给子组件传值：
1.父组件调用子组件的时候动态绑定属性
<parent :dataList='dataList'></parent>
2.子组件定义props接收动态绑定的属性props: ['dataList']
3.子组件使用数据
(2)子组件主动获取父子间的属性和方法：
在子组件中使用this.$parent.属性/this.$parent.方法。
（3）子组件给父组件传值：
一、使用ref属性
1.父组件调用子组件时绑定属性ref
<parent :ref='parent'></parent>
2.在父组件中使用this.$refs.parent.属性/this.$refs.parent.方法
二、使用$emit方法
1.子组件调用this.$emit('方法名‘,传值)
2.父组件通过子组件绑定的'方法名'获取传值。
（4）vue页面级组件之间传值
1.使用vue-router通过跳转链接带参数传参。
2.使用本地缓存localStorge。
3.使用vuex数据管理传值。
（5）说说vue的动态组件。
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。
主要考查面试这 component的 is属性。
（6）keep-alive内置组件的作用
可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中
(7)递归组件的用法
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。
首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。
vue核心知识——路由
1.怎么定义vue-router的动态路由？怎么获取传过来的值？
动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：
{
path: '/details/:id'
name: 'Details'
components: Details
}
访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。
当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数
this.$route.params.id
2.vue-router有哪几种路由守卫?
路由守卫为：
全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter
3.$route和 $router的区别是什么？
$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。
4.vue-router响应路由参数的变化
(1)用watch 检测
(2)组件内导航钩子函数
5. vue-router 传参
(1)使用Params:
只能使用name，不能使用path
参数不会显示在路径上
浏览器强制刷新参数会被清空
（2）使用Query：
参数会显示在路径上，刷新不会被清空
name 可以使用path路径
vue核心知识——vuex
不用Vuex会带来什么问题？
一、可维护性会下降，你要想修改数据，你得维护三个地方
二、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
三、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。
1.vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module。
2、vuex的State特性是？
答：
一、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
二、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
3、vuex的Getter特性是？
答：
一、getters 可以对State进行计算操作，它就是Store的计算属性
二、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
三、 如果一个状态只在一个组件内使用，是可以不用getters
4、vuex的Mutation特性是？
答：
一、Action 类似于 mutation，不同在于：
二、Action 提交的是 mutation，而不是直接变更状态。
三、Action 可以包含任意异步操作
5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
答：
一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。
3965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
