<div> <my-component3 v-model="hello"></my-component3> <div>{{hello}}</div> </div> <script> Vue.component('my-component3', { template: `<input ref="input" type="text" :value="value" @input="checkInput($event.target.value)">`, props: ['value'], methods: { checkInput (value) { var hello = 'hello' if (!hello.includes(value)) { this.$emit('input', hello) this.$refs.input.value = hello } else { this.$emit('input', value) } } } }) new Vue({ el: '#app5', data: { hello: '' } }) </script>
定制组件的v-model默认情况下，一个组件的 v-model 会使用 value 属性和 input 事件，但是诸如单选框、复选框之类的输入类型可能把 value 属性用作了别的目的。model 选项可以回避这样的冲突：
Vue.component('my-checkbox', { model: { prop: 'checked', // 将输入的特性改为checked event: 'change' // 触发的自定义事件类型为change }, props: { checked: Boolean, // this allows using the `value` prop for a different purpose value: String } })
这样设置的话，
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上面的代码就等同于
<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"></my-checkbox>
实际使用时，与之前不同的地方是:
把子组件中接收外部数据的prop属性改为checked
向父组件发出事件时，事件类型应改为change
Vue.component('my-component3', { template: `<input ref="input" type="text" :value="checked" @input="checkInput($event.target.value)">`, props: ['checked'], // 属性名改变 model: { prop: 'checked', event: 'change' }, methods: { checkInput (value) { var hello = 'hello' if (!hello.includes(value)) { this.$emit('change', hello) // 事件类型改变 this.$refs.input.value = hello } else { this.$emit('change', value) // 事件类型改变 } } } })
动态组件通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以让多个组件使用同一个挂载点，并动态切换：
<div> <select v-model="currentComponent"> <option value="home">home</option> <option value="post">post</option> <option value="about">about</option> </select> <component :is="currentComponent"></component> </div> <script> new Vue({ el: '#app6', data: { currentComponent: 'home' }, components: { home: { template: `<header>这是home组件</header>` }, post: { template: `<header>这是post组件</header>` }, about: { template: `<header>这是about组件</header>` } } }) </script>
也可以直接绑定到组件对象上：
var Home = { template: `<header>这是home组件</header>` } new Vue({ el: '#app6', data: { currentComponent: Home } })
保留切换出去的组件，避免重新渲染如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：
<keep-alive> <component :is="currentComponent"> <!-- 非活动组件将被缓存！ --> </component> </keep-alive>
使用slot分发内容终于到了基本知识的最后一个了。官网写的很详细。
单个slot上面用到的很多组件的使用方式是这样的：
<component></component>
也就是说组件中是空的，没有放置任何文本或元素。但是原生的html元素都是可以进行嵌套的，div里面放table
什么的。自定义组件开闭标签之间也可以放置内容，不过需要在定义组件时使用slot。
slot相当于子组件设置了一个地方，如果在调用它的时候，往它的开闭标签之间放了东西，那么它就把这些东西放到slot中。
当子组件中没有slot时，父组件放在子组件标签内的东西将被丢弃；
子组件的slot标签内可以放置内容，当父组件没有放置内容在子组件标签内时，slot中的内容会渲染出来；
当父组件在子组件标签内放置了内容时，slot中的内容被丢弃
子组件的模板:
<div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot> </div>
父组件模板：
<div> <h1>我是父组件的标题</h1> <my-component> <p>这是一些初始内容</p> </my-component> </div>
渲染结果：
<div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> <p>这是一些初始内容</p> </div> </div>
具名slot