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

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

前端会摸鱼

3577人浏览 · 2021-06-28 09:50:20

前端会摸鱼 · 2021-06-28 09:50:20 发布

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必须用短横线

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^