388 vue 之 props： 只读，prop的大小写，prop的类型，prop的校验 |
您所在的位置：网站首页 › vue组件中的name属性命名首字母大写报错 › 388 vue 之 props： 只读，prop的大小写，prop的类型，prop的校验 |
388 vue 之 props： 只读，prop的大小写，prop的类型，prop的校验
|
十、props 的特点 ： 只读
演示验证 props 只读
传的是简单类型 ： 修改会报错
传的复杂类型 (地址) ： 修改不会报错，是因为地址没有变 ，测试 obj={}立马报错 【修改对象中的数据，不会修改对象的地址，但是修改对象的地址就报错。】
修改父组件传给子组件的数据
思路 ： 把接收过来的数据，保存到 data 中一个临时值 (适用在该组件接收数据只会在当前组件内使用) Vue.component('child'， { template： ` 子组件 {{ cmsg }} `， data() { return { cmsg： this.msg } }， props： ['msg']， created() { this.cmsg = 666 } })完善TodoMVC => 修改状态 + 修改任务 08-prop的只读特性.html Document Vue.component('child', { template: ` 子组件 : {{ obj.name }} `, props: ['msg', 'obj'], mounted() { // 修改传递过来的数据 // 1. 修改基本类型的数据，报错 // this.msg = 666 //2. 只是改了对象里的内容 ,并没有改地址 // this.obj.name = '春春' // 虽然这不会报错,但是也不要这么改 this.obj = {} // 这样写报错 } }) const vm = new Vue({ el: '#app', data: { pmsg: '父的信息', pobj: { name: '张三' } } })补充的案例 Document Vue.component('one', { template: ` {{msg}} - {{obj.name}} {{cMsg}} - {{cObj.name}} `, data() { return { // 把接收过来的数据，保存到 data 中一个临时 cMsg: this.msg, cObj: this.obj } }, props: ['msg', 'obj'], created() { this.cMsg = 333 this.cObj.name = '嘻嘻' this.cObj = { name: '嘿嘿' } }, }) const vm = new Vue({ el: '#app', data: { pMsg: '111', pObj: { name: '哈哈' } } })
官 ： HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。 html 的标签和 属性 都是一样，忽略大小写 我是h1官 ： 这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名不好使了 会报警告，父传子也接收不到了 原因是 ： 接收的属性是：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 在 根组件) ==> 得到一个新值(子组件里使用) 父 => 子通讯番外篇 ： 方法当属性传、传过来的带：得到的原型 09-prop的大小写问题.html Document Vue.component('child', { template: ` 子组件 : {{ cMsg }} {{ cUserName }} `, props: ['cMsg', 'cUserName'] }) const vm = new Vue({ el: '#app', data: { pMsg: '父的信息', pUserName: '大傻春' } })10-大小写问题应用在子传父和父传子.html Document Vue.component('child', { template: ` 子组件 : {{ cMsg }} `, props: ['cMsg'], created() { this.$emit('add-todo') } }) const vm = new Vue({ el: '#app', data: { pMsg: '父的信息' }, methods: { pAddTodo() { console.log('哈哈') } } })11-prop的类型问题.html Document Vue.component('child', { template: ` 子组件 : `, props: ['msg'], created() { // 'abc' => 字符串 // '123' => '123' 字符串 console.warn(this.msg, typeof this.msg) // true "boolean" console.warn(this.na, typeof this.na) // 123 "number" } }) const vm = new Vue({ el: '#app', data: { name: 123 } })12-类型的校验问题.html Document // 这个组件是我注册的 Vue.component('child', { template: ` 子组件 : `, props: ['msg'], // props: { // msg: Number // 仅仅是告诉其类型 // }, // props: { // msg: { // type: Number, // 类型 // default: 100 // 默认值 // } // }, created() { // 我希望的是一个数字类型 console.log(this.msg, typeof this.msg) console.log(this.msg + 10) // 133 } }) const vm = new Vue({ el: '#app', data: {} }) |
【本文地址】
今日新闻 |
推荐新闻 |