VUE 开发总结笔记

VUE 开发总结笔记

vue开发过程中遇到的一些问题和总结，都是入门时可能会遇到的问题。

Vue动态添加新的属性到实例上

当我们去看vue文档的时候，发现如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。比如我们我们开始创建了一个对象实例，在实例创建之后为其增加新的属性，我们发现这个属性不能生效,此时需要使用this.$set(‘)方法。

<template>
<more></more>
</template>
<script>
import viewMore from 'viewMore.vue'
export default {
name: 'index',
components: {
more: viewMore
},
data() {
return {
people ：{}
}
},
created(){
this.$set(people , 'age','12');
}
}
</script>

组件开发遇到的问题

组件的开发和引用

当我们将项目中公用的块，或者页面中多处样式一样，只是数据展示不同的地方抽取出一个个公用组件时，可以提高我们的开发效率，避免重复的工作，只需要在不同的页面引入公用的组件即可。创建一个viewMore.vue文件，定义一个组件块。

<template>
<div class="xx">组件</div>
</template>
<script>
export default {
name: 'viewMore',
components: {},
data() {
return {
}
}
}
</script>
<style  scoped>
可以定义组件都有的样式
</style>

这样就可以在其它组件引用了，引用方式很简单：例如在index.vue中引进viewMore.vue组件，假设两个文件处在同级目录中。

index.vue中的代码：

<template>
<more></more>
</template>
<script>
import viewMore from 'viewMore.vue'
export default {
name: 'index',
components: {
more: viewMore
},
data() {
return {
}
}
}
</script>

组件之间传值，父组件传值给子组件和子组件传值给父组件

父组件传值给子组件 （:messageInfo=’message’）

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。

父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

例如我们在index.vue中定义一个字段，或者是ajax请求到的数据需要传递给子组的做法如下：

父组件：index.vue:

<template>
<more :messageInfo='message'></more>
</template>
<script>
import viewMore from 'viewMore.vue'
export default {
name: 'index',
components: {
more: viewMore
},
data() {
return {
message: 'hello world'
}
}
}
</script>

子组件：viewMore.vue

<template>
<div class="xx">组件</div>
</template>
<script>
export default {
name: 'viewMore',
components: {},
data() {
return {
}
},
props: {
//获取父组件传递的参数
messageInfo: {
type: String
},
},
}
</script>
<style  scoped>
可以定义组件都有的样式
</style>

子组件传值给父组件 （this.$emit(‘postDataToParentMethod’,’hello world’)）

例如在我们现在需要将子组件中的一个值传递给父组件，平时项目中的情况可能是，在子组件触发一个事件时，或者一个ajax调用完成是需要把数据传递给父组件，我们这里简单的模拟一个点击是事件，做法如下：

子组件：viewMore.vue

<template>
<div class="xx" @click="postDataToParent">组件</div>
</template>
<script>
export default {
name: 'viewMore',
components: {},
data() {
return {
}
},
props: {
//获取父组件传递的参数
messageInfo: {
type: String
},
},
methods: {
postDataToParent: function (event) {
// 给父组件传值
this.$emit('postDataToParentMethod','hello world');
}
}
}
</script>
<style  scoped>
可以定义组件都有的样式
</style>

父组件获取子组件的值：父组件 index.vue

<template>
<more :messageInfo='message' @postDataToParentMethod="getData">
</more>
</template>
<script>
import viewMore from 'viewMore.vue'
export default {
name: 'index',
components: {
more: viewMore
},
data() {
return {
message: 'hello world',
childData:''
}
},
methods: {
getDate(data){
this.childData=data
}
}
}
</script>

我么可以根据实际情况灵活使用子父组件之间的传递值来完成交互。

子组件在父组件中的点击事件

如果需要在父组件中点击子组件，那么需要使用，

@click.native=”viewMoreQueryKnowledge()”来触发事件。