Vue之Props问题集合

Vue之Props问题集合

最近在学校Vue，遇到了一些问题，这里把学习Props遇到的问题跟大家分享一下。有帮助记得点个赞噢！

a) Props与内部data的不同：
i. props中的属性是只读的，一旦属性生成之后便不能够直接为其赋值，可以通过动态绑定的方法间接改变属性的值；data中的属性值是可读可写的，可以直接为其赋予新的值；
ii. 调用props中的属性的时候只需直接引用，如props:[title]，可以在template中直接将{{title}}进行调用，而data中的值需要用this指针来进行调用，如:data:function(){ return count ; }在template中调用count的时候就要用{{this.count}}

b) 理解替换/合并已有的特性（外部传值与内部属性值接收）及 禁用性继承
官方文档上对从Dom传来的值的解释：对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。像如果组件内设置了一个模板，但是在外部带哦用组件的时候又引入了一个其他的class 如.otherclass,这是传入的class会与model中的值合并，但如果传入 type=“text” 就会替换掉 type=“date” 并把它破坏！所以比较特别的是class 和 style 特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：.

禁用性继承：（引用官方文档进行说明）
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。这个属性会让组件从外部（即Dom）传来其他props中没有的属性时自动选择不接受，style和class除外，用法：
Vue.component(‘my-component’, {
inheritAttrs: false,
// …
})
这尤其适合配合实例的 $attrs属性使用，该属性包含了传递给一个组件的特性名和特性值：required:true,placeholder{:}^{\prime }Enteryourusernam{e}^{\prime }加入$attrs属性，如：
<base-input label="姓名:"class=“username-input” placeholder=“Enter your username” data-data-picker = “activated”>

我们看看去掉inheritAttrs:false：

可以看到外部传入的属性及他们的值和通通都接收了

我们再看加上inheritAttrs:false，但是去掉v-bind="$attrs"

可以看到没有继承外部传来的属性，也没有。

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。