VUE组件使用小心得

前言:

萌新入职3个月了。虽然是后端开发，但是系统前端页面现在也是我在写。上学的时候写前端都是用html，js，jq直接写。不过vue其实底层也是js，只不过是自己封装了一下。所以在参考之前的项目代码和学习官方文档后自己就开始上手开发（路程艰辛，踩了很多很多坑啊）。这里记录一下这几个月来接触vue使用的一些小小心得。

1.VUE的组件化。

个人理解，vue的组件化的使用有点像后端函数调用。写好一个vue子组件，相当于后端写好一个函数。然后哪里需要只需在父组件中引用一下子组件便可以使用。极大的降低了代码的重复度。

不过在使用父子组件时，他们的通讯（互相的传参和事件处理）就是一个问题了。

（1）父组件与子组件通讯:

1.父组件给子组件传值：

子组件:
子组件在props中注册变量

<template>
  <div>{{Name}}</div>
</template>
<script>
export default{
    name:"SON",
    props：{
        Name:String,
    },
    data(){
        return(){
        }
    },
    methods:{
    },
}

父组件:
1.首先用import导入子组件文件夹
2.在components中声明子组件
3.然后在模板中直接使用子组件在components中的命名
4.使用v-bind方法绑定子组件props中声明的变量名称

<template>
  <SON :Name="想传的参数"></SON>
</template>
<script>
import SON from"./son.vue";
export default{
    name:"FATHER",
    components:{
        SON,
    },
    data(){
        return(){
        }
    },
    methods:{
    },
}

几个需要注意的点:
1.如果子组件声明的是数组或者对象格式，需要给出默认返回值:

props: {
    array: {
        type: Array,
        default () {
            return []
        }
    },
    object: {
        type: Object,
        default () {
            return {}
        }
    }
}

2.如果子组件想要处理变更父组件传递来的值，可以在子组件中定义一个属性，然后将父组件的值传给子组件内部的属性，就可自由更改由父组件传递来的值(如果你直接更改父组件对象，数组中的值，父组件的值也会更改，如果你直接更改父组件字符串的值，vue会警告，这不符合单向数据流)

<template>
  <div>{{sonName}}</div>
</template>
<script>
export default{
    name:"SON",
    props：{
        Name:String,
    },
    data(){
        return(){
        sonName:this.Name
        }
    },
    methods:{
        在这里可以写处理sonName的函数
    },
}

2.子组件给父组件传值：

子组件:
（主动）使用$emit给父组件传值

<template>
</template>
<script>
export default{
    name:"SON",
    data(){
        return(){
        }
    },
    methods:{
        toFather(){
            let Nmae = "JOY"
            this.$emit("sonValue",Nmae)
            //this.$emit("这里是传值事件",这里是想传的数据)
        },
    },
}

父组件:
通过监听子组件的事件，触发响应的函数获取子组件的值

<template>
  <SON @sonValue="getSonValue"></SON>
  //@子组件传递的事件="父组件根据事件触发的方法"
</template>
<script>
import SON from"./son.vue";
export default{
    name:"FATHER",
    components:{
        SON,
    },
    data(){
        return(){
        }
    },
    methods:{
        //getSonValue(data)中的data就是子组件传递来的值
        getSonValue(data){
            console.log(data)
        },
    },
}

使用

$emit

不光可以传值，只要是子组件想要让父组件做一些事情都可以用这个传递一个事件给父组件

此外，父组件还可以使用ref获取子组件的值
子组件:

<template>
</template>
<script>
export default{
    name:"SON",
    data(){
        return(){
        name:"JOY"
        }
    },
    methods:{
        },
    },
}

父组件:
通过ref直接获得子组件中的值

<template>
  <SON ref="sonComponent"></SON>
</template>
<script>
import SON from"./son.vue";
export default{
    name:"FATHER",
    components:{
        SON,
    },
    data(){
        return(){
        }
    },
    methods:{
        getSonValue(data){
           let sonName = this.&refs.sonComponent.name
           console.log(sonName)
        },
    },
}

2.VUE的组件化注意问题

vue组件化传值是异步传值。如果数据量比较大，很有可能页面已经渲染好了但值还没拿到。这时可以使用

<SON v-if="传的值"></SON>

来等待值得到后再渲染组件