乐趣区

父子组件通信爬坑小记录

jiezi

kebab-case：短横线命名法，多个单词之间使用短横线“-”进行连接，单词全部小写。如：first-name,user-info,create-order。
camelCased：驼峰命名法，第一个单词小写，从第二个单词开始首字母大写。如：fistName,userInfo,createOrder。
PascalCased：帕斯卡命名法，单字之间不能使用空格、“_”和“-”进行连接，命名中所有的单词必须首字母大写。如 FirstName、UserInfo、CreateOrder。

props的大小写

父组件在传值的时候可子组件以将变量从短横线式转换为驼峰式，所以在传递参数的时候父组件使用短横线式时，子组件应该将其转换为驼峰式进行接收

parent.vue

<Childs2 my-first="msg"></Childs2>

childs2.vue

<template>
    <div>
        Childs2
        {{myFirst}}
    </div>
</template>
<script>
export default {
    name:'Childs2',
    props:["myFirst"],
}
</script>

运行结果如下

当父组件中传递的变量为全驼峰式或者其他格式的时候，子组件只需要同名的变量便可进行数据接收。

各种数据类型的动静态props

props: [‘size’],
computed: {
normalizedSize: function () {

return this.size.trim().toLowerCase()

}
}
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

emit的大小写

事件的名字没有自动化的大小写转换，触发的事件名必须和见提供的事件名完全匹配的情况下才能正常运行。

parent.vue

<templete>
    <Childs2 @testEmit="hello"> </Childs2>
</templete>
<script>
    export default {
        methods: {hello() {alert('hello');
            }
        }
    }
</script>

child.vue

methods: {sayHi(){this.$emit("testEmit");
}

虽然我们定义的函数名字为驼峰式的，但是不可以监听到对应的短横线命名的 test-emit 事件，必须使用 testEmit 来监听。

总结

  1. 组件引用命名时，可以使用同名标签，若为驼峰式命名的情况下，可以使用短横线命名法。如：
<template>
<div>
  <childs-test MyFirst="msg"></childs-test>
    <childsTest MyFirst="msg"></childsTest>
    <!-- 两种方式均可正确引用 -->
</div>
</template>
<script>
import childsTest from './Childs2'
export default {
    components:{childsTest,},
  }
</script>
  1. 子组件向父组件传参时，如果使用短横线命名法，则在 props 时需要使用响应的驼峰式进行接收，其他格式的命名则用同一名字进行接收。

3. 父组件向子组件传参时，无论何种命名方式，必须使用同一名字进行接收。

退出移动版