Vue项目开发的一些问题和踩过的坑

最新推荐文章于 2024-04-13 15:57:03 发布

原创最新推荐文章于 2024-04-13 15:57:03 发布 · 351 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件通信 #父子组件通信

项目开发随记专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Vue.js中父组件与子组件之间的数据传递及事件触发机制，包括使用ref直接修改子组件的状态、通过props传递数据、利用$emit从子组件向父组件发送消息等方法，并提供了更新数组数据以确保DOM正确渲染的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件修改子组件data数据以及父组件调用子组件定义的方法 —— ref

子组件：

<template>
  <div class="keyboard-wrapper" :class="isShow"></div>
</template>
<script>   
export default {
    data() {
        return {
            isShow:"hide"
        }
    },
    methods: {
        cutdown() {
            alert(1)
        }
    }
}
</script>

父组件：

<template>
    <Child ref="child"></Child >
</template>
<script>
import Child from "./child"
export default {
    components: {
        Child 
    },
    methods: {
         changeChildData() {
             this.$refs.child.isShow = "show"; //修改子组件isShow的值
             this.$refs.child.cutdown(); //调用组组件cutdown方法
         }
    }
}
</script>

父组件引用子组件后，在子组件上添加 ref 属性，通过 this.$refs 的方式，父组件可以修改子组件任意data数据.

当然这种方式还可以调用子组件的方法：this.$refs.child.cutdown()；

父组件修改子组件中的data数据 —— props

子组件

<template>
  <div>{{title}}</div>
</template>
<script>   
export default {
   props: ['title']
}
</script>

父组件

<template>
    <Child :title="title"></Child >
</template>
<script>
import Child from "./child"
export default {
    data() {
        return {
            title: "这是父组件定义的title"
        }
    },
    components: {
        Child 
    },
}
</script>

父组件引用子组件后，在子组件上绑定要传的值，例如我们需要修改子组件的title，那我们就绑定title，然后在父组件添加一个data数据改变子组件的title值，子组件通过props的方式接收这个值；

子组件向父组件传递数据 —— $emit

子组件

<template>
  <div class="keyboard-wrapper" :class="isShow"></div>
</template>
<script>   
export default {
    data() {
        return {
            isShow:"hide"
        }
    },
    methods: {
        cutdown() {
            this.isShow = "hide"
            this.$emit('trans', "hide")
        }
    }
}
</script>

父组件

<template>
    <Child @trans="hideMask"></Child >
</template>
<script>
import Child from "./child"
export default {
    components: {
        isShow 
    },
    methods: {
         hideMask(msg) {
             this.isShow = msg; //msg为子组件传递的数据“hide”
         }
    }
}
</script>

在子组件中通过this.$emit(参数一，参数二)的方法将参数二通过参数一为事件传递给父组件，父组件中在注册的子组件上通过 @参数一=“自定义事件” 的方式在自定义事件中获取到传递的数据参数二；

更新data中的数组数据Dom不会重新渲染解决办法

<template>
    <div v-for="item in codeList">{{item}}</div>
</template>

<script>
export default {
    data() {
        return {
            codeList:[]
        }
    }
    methods: {
         updateList() {
             for(var i = 0; i < this.codeList.length; i++){
                if(this.codeList[i] == ""){
                    this.$set(this.codeList, i, "项目"+i);
                }
             }
        }
    }
}
</script>

我们需要通过this.$set方法更新data中的数组数据，这样页面才会同步渲染dom