标签：Vue required 大小写 props 组件 cMsg

通过vue构建的实例对象其实也是一种组件 var app=new Vue(); 因为vue其他组件都是通过它来构建的，因此它又称为根组件。       自定义Vue组件:    复用、快速开发。 Vue组件的封装: Vue.component();用于定义一个组件. 第一个参数:为组件名-----'leaf-button',(必须要有两个乃至以上单词构成，且中间用中划线-连接，因为vue作者尤雨溪想到随时代发展，以后的html新标签将会越来越多，为防止冲突而制定的组件命名规则) 第二个参数是一个对象:{    },    用于放选项,不需要挂载，只有根组件需要挂载， template为模板的意思,也是一个选项 Eg: template:'<div><button>自定义按钮</button></div>',     element中文组件库 因为组件会被调用多次，因而作者尤雨溪在要求data格式时特别要求深复制，如果浅复制，则组件在一个地方被调用，所有组件的值都将被改变，如下：   组件之间可以互相嵌套，若在一个组件中嵌套了另一个组件，则此被嵌套组件必须定义在该组件之前。    

父子组件通信:

props:{    }        -------------------用于指定当前自定义组件，可以拥有的所有自定义属性. required:    是否需要.（不填会报错）     props:{     msg:{         type:String,         required:true     },     href:{         type:String,         required:false     },     arr:{         type:Array,         required:false     } } 放在props里的所有要获取的属性都不能用大写.   子组件写静态链接会跳转不过去 在CLI脚手架中，如果属性的required为false，必须要给一个默认值default：(以工厂函数形式返回) arr:{     type:Array,     required:false,     default:function(){         return [1,2,4,6,9];//若父组件有值，优先取父组件的值，没有才用默认值     } }

prop 的大小写

• 官 ： HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。

  • html 的标签和 属性 都是一样，忽略大小写
  • <H1 TITLE="哈哈">我是h1</H1>

• 官 ： 这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名不好使了

  • <child ：cMsg="pmsg"></child> 会报警告，父传子也接收不到了
  • 原因是 ： 接收的属性是：cMsg， 因为忽略大小写，已为 ： cmsg
  • 所以已经准备要读取的 是 cmsg 的值，否则要报警告
    You should probably use "c-msg" instead of "cMsg".

• 方式 1 ： 全用小写，不要使用驼峰命名 (不推荐)

  • 接收 ： cmsg
  • props/读取 ：cmsg

• 方式 2 官 ： 需要使用其等价的 kebab-case (短横线分隔命名) 命名： (推荐)

  • 接收 ： ：c-msg='pmsg'
  • props/读取 ： cMsg / this.cMsg

• 大小写在 父传子和 子传父中的应用 (都是要 带 - 的)

• • 父传子 ： ：c-msg ==> cMsg 改驼峰 - 因为props
  • 子传父 ： @todo-head = 'pAddTodo' ==> this.$emit('todo-head') 不改驼峰

• 完善 TodoMVC ： 底部隐藏+剩余完成数+清除完成

  • 计算属性 ： 已知值(todoList 在 根组件) ==> 得到一个新值(子组件里使用)
  • 父 => 子通讯

• 番外篇 ： 方法当属性传、传过来的带：得到的原型

具体如下图：

 

 

标签：Vue,required,大小写,props,组件,cMsg
来源： https://www.cnblogs.com/jiaqi666/p/13278155.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。