vue组件的驼峰式命名与短横线分割命名

最新推荐文章于 2023-05-24 22:11:58 发布

&Cy

最新推荐文章于 2023-05-24 22:11:58 发布

阅读量3.2k

点赞数 1

分类专栏： VUE

原文链接：https://www.cnblogs.com/cjll/p/13706747.html

版权

VUE 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

vue组件的驼峰式命名与短横线分割命名

参考：https://blog.csdn.net/qq_43650979/article/details/105839130

官网给出说明为：在这里插入图片描述
官网给出说明为：
1.注册组件的时候使用了驼峰命名
如果在注册组件的时候使用了驼峰命名, 那么在使用时需要转换成短横线分隔命名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件命名</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <my-son></my-son><!-- 使用时：短横线分割命名-->
</div>
<template id="son">
    <div>
        <p>......</p>
    </div>
</template>
<script>
    Vue.component("mySon", { // 注册时：驼峰式命名
        template: "#son",
    });
    let vue = new Vue({
        el: '#app',
    });
</script>
</body>
</html>

注意：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件命名</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- <my-son></my-son>   -->
	<!-- 使用时：短横线分割命名-->
	<mySon></mySon>
</div>
<template id="son">
    <div>
        <p>......</p>
    </div>
</template>
<script>
    Vue.component("mySon", { // 注册时：驼峰式命名
        template: "#son",
    });
    let vue = new Vue({
        el: '#app',
    });
</script>
</body>
</html>

将会报错：

2.传递数据时使用驼峰名称
如果父组件向子组件传递数据时使用了短横线分隔命名, 子组件接收时写驼峰式命名
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件命名</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <my-son :parent-name="name"></my-son><!-- 向子组件传递数据：短横线分割命名，不能使用驼峰式-->
</div>
<template id="son">
    <div>
        <p>{{parentName}}</p><!-- 驼峰式使用-->
    </div>
</template>
<script>
    Vue.component("mySon", {
        template: "#son",
        props:["parentName"] // 驼峰式接收
    });
    let vue = new Vue({
        el: '#app',
        data:{
            name:"test"
        }
    });
</script>
</body>
</html>

注意：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件命名</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <my-son :parentName="name"></my-son><!-- 向子组件传递数据：短横线分割命名，不能使用驼峰式--> 
</div>
<template id="son">
    <div>
        <p>{{parentName}}</p><!-- 驼峰式使用-->
    </div>
</template>	
<script>
    Vue.component("mySon", {
        template: "#son",
        props:["parentName"] // 驼峰式接收
    });
    let vue = new Vue({
        el: '#app',
        data:{
            name:"test"
        }
    });
</script>
</body>
</html>

在这里插入图片描述

3.传递方法时双方都不能使用驼峰命名, 只能用短横线分隔命名
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件命名</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <my-son :parent-name="name" @parent-fn="fn"></my-son><!-- 向子组件传递方法：短横线分割命名，不能使用驼峰式-->
</div>
<template id="son">
    <div>
        <button @click="fn">按钮</button>
        <p>{{parentName}}</p>
    </div>
</template>
<script>
    Vue.component("mySon", {
        template: "#son",
        props:["parentName"],
        methods:{
            fn(){
                this.$emit("parent-fn"); // 短横线式接收
            }
        }
    });
    let vue = new Vue({
        el: '#app',
        data:{
            name:"test1"
        },
        methods:{
            fn(){
                console.log("test2");
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述

注意：
组件可以用驼峰法和短横线
dom必须用短横线

&Cy

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue组件的驼峰式命名与短横线分割命名

vue组件的驼峰式命名与短横线分割命名参考：https://blog.csdn.net/qq_43650979/article/details/105839130官网给出说明为：官网给出说明为：1.注册组件的时候使用了驼峰命名如果在注册组件的时候使用了驼峰命名, 那么在使用时需要转换成短横线分隔命名<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫