v-for 和v-if的优先级
v-for 的优先级比v-if 高
Vue子组件调用父组件的方法
第一种方法:直接在子组件中通过this.$parent.event来调用父组件的方法
父组件
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
子组件
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>
第二种方法:是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。
父组件
<template>
<div>
//父组件需要在这里传值
<child @fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
子组件
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
//调用父组件的方法
this.$emit('fatherMethod');
}
}
};
</script>
第三种方法:父组件把方法传入子组件中,在子组件里直接调用这个方法
父组件
<template>
<div>
//属性的方式传值
<child :fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</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();
}
}
}
};
</script>
vue生命周期钩子函数有哪些?
创建前/后
在beforeCreated阶段,vue实例的挂载元素
e
l
和
数
据
对
象
d
a
t
a
都
为
u
n
d
e
f
i
n
e
d
,
还
未
初
始
化
。
在
c
r
e
a
t
e
d
阶
段
,
v
u
e
实
例
的
数
据
对
象
d
a
t
a
有
了
,
el和数据对象data都为undefined,还未初始化。 在created阶段,vue实例的数据对象data有了,
el和数据对象data都为undefined,还未初始化。 在created阶段,vue实例的数据对象data有了,el还没有。
载入前/后
在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。
在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后
当data变化时,会触发beforeUpdate和updated方法。
销毁前/后
在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
vue 的双向绑定的原理是什么
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
Vue 组件中 data 为什么必须是函数
在 new Vue() 中,data 是可以作为一个对象进行操作的,然而在 component 中,data 只能以函数的形式存在,不能直接将对象赋值给它。
当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的data不会相互影响,是独立的
说出至少4种vue当中的指令和它的用法?
v-if:判断是否隐藏;
v-for:数据循环;
v-bind:class:绑定一个属性;
v-model:实现双向绑定