简述Vue中容易被忽视的知识点

Vue.component('base-input', {
 inheritAttrs: false,
 template: `<input type="date" placeholder="replace" class="default">`
})

但是inheritAttrs:false选项不会影响style和class的绑定，因此style和class还是会合并

.sync修饰符

在有些情况下，可能需要对一个 prop进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源，因此Vue提供了sync修饰符，举个例子：

<div id="app">
 <span>{{title}}</span>
 <text-document v-bind:title.sync="title"></text-document>
</div>

Vue.component('text-document', {
 props: ['title'],
 template: `<button @click="change">change</button>`,
 methods: {
  change () {
   this.$emit('update:title', 'change')
  }
 },
})
new Vue({
 el: '#app',
 data() {
  return {
   title: 'default'
  }
 }
})

当调用this.$emit(‘update:title’, ‘change’)，父组件中的title就会改变

总结

这篇文章对Vue中一些容易忽视的点进行了简单的总结，希望看完之后能对大家有所帮助。也希望大家多多支持软件开发网。