Prop

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>运行结果如下当父组件中传递的变量为全驼峰式或者其他格式的时候，子组件只需要同名的变量便可进行数据接收。 各种数据类型的动静态propsprops: ['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来监听。 总结组件引用命名时，可以使用同名标签，若为驼峰式命名的情况下，可以使用短横线命名法。如：<template><div> <childs-test MyFirst="msg"></childs-test> <childsTest MyFirst="msg"></childsTest> <!-- 两种方式均可正确引用 --></div></template><script>import childsTest from './Childs2'export default { components:{ childsTest, }, }</script>子组件向父组件传参时，如果使用短横线命名法，则在props时需要使用响应的驼峰式进行接收，其他格式的命名则用同一名字进行接收。3.父组件向子组件传参时，无论何种命名方式，必须使用同一名字进行接收。

改变了子组件中的props中的值，浏览器会发出警告在vue文档中的单向数据流也提到了每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。在一次项目中，我直接更改了父组件传递给子组件的值。浏览器果然报错了。代码如下父组件：<template> <components :orderdata=“orderdata” :is=“tabCom[ind]"></components></template><script>export default { data() { return { orderdata: [] } }}</script>子组件<template> <div :key=“index” class=“bigbox” v-for="(item,index) of orderdata”></template><script>export default { props: { orderdata: { type: Array, required: true }, methods: { cancelOrderlist(id) { this.$messagebox .confirm(‘确定取消此订单?’) .then(action => { if (action === ‘confirm’) { cancelOrder(this.token, id).then(res => { getOrder(this.token).then(res => { this.orderdata = res.data.data.data // 这里直接更改props中的值，浏览器发出警告 }) }) } }) .catch(err => { if (err === ‘cancel’) { } }) }}</script>但是我确实需要修改props的值，并将其数据渲染给dom元素那么解决办法就是不直接更改props的值，而是更改其引用类型，这样控制台就不会报错了。父组件：<template> <components :orderobj=“orderobj” :is=“tabCom[ind]"></components></template><script>export default { data() { return { orderobj: { orderdata: [] } } }}</script>子组件<template> <div :key=“index” class=“bigbox” v-for="(item,index) of orderobj.orderdata”></template><script>export default { props: { orderobj: { type: Object, required: true }, methods: { cancelOrderlist(id) { this.$messagebox .confirm(‘确定取消此订单?’) .then(action => { if (action === ‘confirm’) { cancelOrder(this.token, id).then(res => { getOrder(this.token).then(res => { this.orderobj.orderdata = res.data.data.data // 这里直接更改props中的值，浏览器发出警告 }) }) } }) .catch(err => { if (err === ‘cancel’) { } }) }}</script>这样就不是改变值，而是通过改变引用类型。这是因为父组件传递给子组件的是一个引用，也就是内存地址。我们改变了orderdata的值，并没有改变内存地址。所以不会发出警告 ...