<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.jb51.net/statics/vue.js"></script> </head> <body> <div> <my-alex></my-alex> <p></p> <my-peiqi></my-peiqi> </div> <script> let mixs = { methods: { show: function (name) { console.log(`${name} is here!`); }, hide: function (name) { console.log(`${name} is gone!`); }, } }; let myAlex = { template: ` <div> <button @click="show('alex')">点我显示alex</button> <button @click="hide('alex')">点我隐藏alex</button> </div> `, mixins: [mixs], }; let myPeiqi = { template: ` <div> <button @mouseenter="show('peiqi')">鼠标移入显示沛齐</button> <button @mouseleave="hide('peiqi')">鼠标离开隐藏沛齐</button> </div> `, mixins: [mixs], }; new Vue({ el: "#mixin-demo", components: { "my-alex": myAlex, "my-peiqi": myPeiqi, } }) </script> </body> </html>
插槽
有时候我们需要向组件传递一些数据，这时候可以使用插槽.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px; } </style> <script src="https://www.jb51.net/statics/vue.js"></script> </head> <body> <div> <com-content>登录</com-content> <com-content>注册</com-content> <com-content>最热</com-content> <com-content>段子</com-content> <com-content>42区</com-content> <com-content>图片</com-content> </div> <script> Vue.component('com-content', { template: ` <div> <slot></slot> </div> ` }); new Vue({ el: "#app01", }) </script> </body> </html>
具名插槽
操作使用了组件的复用，如果我们在同一个组件内写入不同的页面呢？此时，我们需要多个插槽，并且给不同的内容命名。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px; } </style> <script src="https://www.jb51.net/statics/vue.js"></script> </head> <body> <div> <base-layout> <template slot="header"> <h1>这是标题栏</h1> </template> <template> <h2>这是内容</h2> </template> <template slot="footer"> <h3>这是页脚</h3> </template> </base-layout> </div> <script> let baseLayout = { template: ` <div> <header> <slot></slot> </header> <main><slot></slot></main> <footer> <slot></slot> </footer> </div> ` }; new Vue({ el: "#app01", components: { "base-layout": baseLayout } }) </script> </body> </html>
我们还是可以保留一个未命名插槽，这个插槽是 默认插槽 ，也就是说它会作为所有未匹配到插槽的内容的统一出口。
在组件上使用v-model
自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：
<input v-model="searchText">
等价于：
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value"
>
当用在组件上时， v-model 则会这样：
<custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input>
为了让它正常工作，这个组件内的 <input> 必须：
将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
写成代码之后是这样的：
Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` })
现在 v-model 就应该可以在这个组件上完美地工作起来了：
<custom-input v-model="searchText"></custom-input>
如下是在组件中使用v-model示例：