当前位置：首页 > news >正文

西宁专业网站建设广东网络推广运营

news 2025/7/16 15:35:43

西宁专业网站建设,广东网络推广运营,诸几建设银行网站,wordpress 开通微信制服目录 0.前言驼峰和短横线分割命名注意事项组件注册命名父子组件数据传递时命名父子组件函数传递 0.前言 Vue驼峰命名法指的是将变量以驼峰形式命名，例如 userName、userId 等，而短横线分隔符法则指的是用短横线分隔变量名，例如 user…

0.前言

驼峰和短横线分割命名注意事项

组件注册命名

父子组件数据传递时命名

父子组件函数传递

0.前言

Vue驼峰命名法指的是将变量以驼峰形式命名，例如 userName、userId 等，而短横线分隔符法则指的是用短横线分隔变量名，例如 user_name、user_id 等。

两种命名方式在实际应用中都有其优势和缺点，但是它们的主要区别在于可读性和可维护性。Vue使用驼峰命名法有助于提高变量的可读性，因为驼峰命名法可以更好地表示变量的意思，但是这也可能对于像JavaScript这样的动态语言带来问题，因为它可能会引发一些预期以外的问题。而用短横线分隔符法来命名变量，几乎可以避免上述问题，并且它更具可维护性，但是它往往不具可读性。

驼峰和短横线分割命名注意事项

我们一般定义组件的方式有两种：

短横线分隔命名：kebab-case。
首字母大写命名：PascalCase 。

组件注册命名

例如，我写一个简单的子组件。

<template><div class="border"><h2>我是子组件</h2></div>
</template>
<script setup>
</script>
<style scoped>
.border {border: 1px solid;width: 400px;
}
</style>

注册的时候采用PascalCase命名：

createApp(App).component('MyComponent', MyComponent).mount('#app')

使用的时候：

<template><div class="border"><h1 >我是父组件</h1><my-component /><!-- <MyComponent /> --><!-- <myComponent /> --></div>
</template>
<style scoped>
.border {border: 1px solid;width: 400px;height: 200px;
}
</style>

结果如下：

自定义的组件在使用上，命名的规则如下：

注册的时候：使用了PascalCase命名。
使用的时候：可以使用PascalCase命名（首字母不区分大小写）或者kebab-case命名（每个单词的首字母不区分大小写）。

一般编码的时候，习惯这样：命名的时候采取PascalCase命名法，使用的时候采取kebab-case法（每个单词的首字母小写）。

父子组件数据传递时命名

父组件在给子组件传递变量的时候，如果变量名称采用kebab-case法，那么子组件在接收的时候应该写驼峰命名法。

例如，我再父组件中这么传参：

<MyComponent :user-name="name"/>

子组件的接收：驼峰命名法。

<template><div class="border"><h2>我是子组件</h2><div>接收来自父组件传入的参数:{{ props.userName }}</div></div>
</template>
<script setup lang="ts">
import { computed, defineProps, withDefaults } from "vue";
interface Props {// 记得使用驼峰命名法userName: string;
}
const props = withDefaults(defineProps<Props>(), {userName: "",
});
</script>
<style scoped>
.border {border: 1px solid;width: 400px;
}
</style>

效果如下：

父子组件函数传递

父组件在传递给子组件的时候，命名上我测试下来没有什么特殊的要求。先说下传递的命名上：

父组件传递：

<MyComponent :user-name="name" @sayHello="sayHello"/>
const sayHello =  ()=>{console.log('Hello')
}

子组件的接收上：

<template><div class="border"><h2>我是子组件</h2><div>接收来自父组件传入的参数:{{ props.userName }}</div><a @click="hello">点击</a><br><a @click="hello2">点击2</a></div>
</template>
<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
interface Props {userName: string;
}
const props = withDefaults(defineProps<Props>(), {userName: "",
});
const emit = defineEmits(["say-hello", "sayHello"]);
const hello = () => {emit("say-hello");
};
const hello2 = () => {emit("sayHello");
};
</script>
<style scoped>
.border {border: 1px solid;width: 400px;
}
</style>

结果如下：