Vue驼峰与短横线分割命名中有哪些坑

目录 驼峰和短横线分割命名注意事项 组件注册命名 父子组件数据传递时命名 父子组件函数传递

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

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

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

组件注册命名

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

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

注册的时候采用 PascalCase 命名：

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

使用的时候：

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

结果如下：

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

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

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

父子组件数据传递时命名

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

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

<MyComponent :user-n am e="name"/>

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

<template>
  <div class="border">
    <h2>我是子组件</h2>
    <div>接收来自父组件传入的参数:{{  PR ops.userName }}</div>
  </div>
</template>
<script setup lang="ts">
import { computed,  define Props, w IT h defaults  }  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 } f rom  "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>

结果如下：无论是使用下划线分割还是原名，都可以 正常 接收。

经过测试，父组件在传函数的时候，使用 kebab-case 法，和上述案例一个效果。

因此我们就这么约定吧：

父组件传递函数的时候，就原名传入即可。

到此这篇关于Vue驼峰与短横线分割命名中有 哪些 坑的 文章 就介绍到这了,更多相关Vue驼峰与短横线分割命名内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: 浅谈Vue初学之props的驼峰命名

总结

以上是 为你收集整理的 Vue驼峰与短横线分割命名中有哪些坑 全部内容，希望文章能够帮你解决 Vue驼峰与短横线分割命名中有哪些坑 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue驼峰与短横线分割命名中有哪些坑的详细内容...