网站商城建设价格,网址大全123官方网站一汽奔腾,购物网站开发用什么软件,成都网站优化步骤目录
0.前言
驼峰和短横线分割命名注意事项
组件注册命名
父子组件数据传递时命名
父子组件函数传递 0.前言 Vue驼峰命名法指的是将变量以驼峰形式命名#xff0c;例如 userName、userId 等#xff0c;而短横线分隔符法则指的是用短横线分隔变量名#xff0c;例如 user…目录
0.前言
驼峰和短横线分割命名注意事项
组件注册命名
父子组件数据传递时命名
父子组件函数传递 0.前言 Vue驼峰命名法指的是将变量以驼峰形式命名例如 userName、userId 等而短横线分隔符法则指的是用短横线分隔变量名例如 user_name、user_id 等。 两种命名方式在实际应用中都有其优势和缺点但是它们的主要区别在于可读性和可维护性。Vue使用驼峰命名法有助于提高变量的可读性因为驼峰命名法可以更好地表示变量的意思但是这也可能对于像JavaScript这样的动态语言带来问题因为它可能会引发一些预期以外的问题。而用短横线分隔符法来命名变量几乎可以避免上述问题并且它更具可维护性但是它往往不具可读性。
驼峰和短横线分割命名注意事项
我们一般定义组件的方式有两种
短横线分隔命名kebab-case。首字母大写命名PascalCase 。组件注册命名
例如我写一个简单的子组件。
templatediv classborderh2我是子组件/h2/div
/template
script setup
/script
style scoped
.border {border: 1px solid;width: 400px;
}
/style
注册的时候采用PascalCase命名
createApp(App).component(MyComponent, MyComponent).mount(#app)
使用的时候
templatediv classborderh1 我是父组件/h1my-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-namename/
子组件的接收驼峰命名法。
templatediv classborderh2我是子组件/h2div接收来自父组件传入的参数:{{ props.userName }}/div/div
/template
script setup langts
import { computed, defineProps, withDefaults } from vue;
interface Props {// 记得使用驼峰命名法userName: string;
}
const props withDefaults(definePropsProps(), {userName: ,
});
/script
style scoped
.border {border: 1px solid;width: 400px;
}
/style
效果如下 父子组件函数传递
父组件在传递给子组件的时候命名上我测试下来没有什么特殊的要求。先说下传递的命名上
父组件传递 MyComponent :user-namename sayHellosayHello/
const sayHello (){console.log(Hello)
}
子组件的接收上
templatediv classborderh2我是子组件/h2div接收来自父组件传入的参数:{{ props.userName }}/diva clickhello点击/abra clickhello2点击2/a/div
/template
script setup langts
import { defineProps, withDefaults } from vue;
interface Props {userName: string;
}
const props withDefaults(definePropsProps(), {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法和上述案例一个效果。
因此我们就这么约定吧
父组件传递函数的时候就原名传入即可。
