vue组件套娃
1. vue自定义组件2. 组件和插槽套娃3. vue组件通过自定义事件更改vue实例中的数据1. vue自定义组件
语法ponent('自定义组件名', {props: ['var1', 'var2', 'var3'], //每个属性可以和页面绑定值template: '<p>{{ var1 }}</p>' // 自定义模板 里面套html标签, 可以取属性的值})
第一个自定义组件
<script>ponent('lover', {template: '<p>taylor swift - lover.mp3</p>'});let app = new Vue({el: "#app",data: {}});</script>
<div id="app"><!-- 使用自定义组件模板，注意绑定了vue对象才有用 --><lover></lover></div>
将自定义组件里面的数据写活
<script>/* 自定义组件模板 bitqian标签 */ponent("bitqian", {props: ['language'],template: '<li>{{ language }}</li>'});let app = new Vue({el: "#app",data: {items: ["java", "python", "go"]}});</script>
<!-- 获得每个item，并将items里面的每个item通过组件的language属性绑定到bitqian标签 --><bitqian v-for="item in items" v-bind:language="item" v-bind:key="item.index"></bitqian>
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue 组件绑定值</title><script src="../js/vue.js"></script></head><body><div id="app"><!-- 使用自定义组件模板，注意绑定了vue对象才有用 --><lover></lover><hr/><!-- 获得每个item，并将items里面的每个item通过组件的language属性绑定到bitqian标签 --><bitqian v-for="item in items" v-bind:language="item" v-bind:key="item.index"></bitqian></div><script>ponent('lover', {template: '<p>taylor swift - lover.mp3</p>'});/* 自定义组件模板 bitqian标签 */ponent("bitqian", {props: ['language'],template: '<li>{{ language }}</li>'});let app = new Vue({el: "#app",data: {items: ["java", "python", "go"]}});</script></body></html>
2. 组件和插槽套娃
插槽<slot></slot>，就是一个孔，可以套vue组件用组件套组件的方式代替普通的html标签<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>slot插槽 结合vue组件 实现模板化</title><script src="../js/vue.js"></script></head><body><div id="app"><!-- 将每个item的值绑定到模板中的属性上 --><my-component v-for="item in items" v-bind:language="item"></my-component></div><!-- 插槽的目的 为了实现代码模板化 --><div id="app1"><!--<p>后端语言</p><ul><li>java</li><li>python</li><li>go</li><li>linux</li></ul>--><demo-component><!-- 记得绑定插槽 --><demo-title slot="demo-title" v-bind:title="title"></demo-title><demo-item slot="demo-item" v-for="(item, index) in items":item="item" v-bind:index="index"></demo-item></demo-component></div><script>// vue组件复习ponent('my-component', {props: ['language'],template: '<li>{{ language }}</li>'})new Vue({el: "#app",data: {items: ['c', 'cpp', 'object-c']}})/* slot 插槽定义 组件通过插槽套组件 */ponent('demo-component', {template:'<div>' +'<slot name="demo-title"></slot>' +'<ul>' +'<slot name="demo-item"></slot>' +'</ul>' +'</div>'})// 标题组件ponent('demo-title', {props: ['title'],template: '<p>{{ title }}</p>'})// 标题下面对应的每一项ponent('demo-item', {props: ['item', 'index'],template: '<li>{{ index }}=========={{ item }} </li>'})// vue实例 给组件提供数据 let vm = new Vue({el: "#app1",data: {title: '后端语言',items: ['java', 'python', 'go', 'linux']}})</script></body></html>
3. vue组件通过自定义事件更改vue实例中的数据
this.$emit(‘functionName’, params…)实现自定义事件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue 插槽复习</title><script src="../js/vue.js"></script></head><body><div id="app"><my-component><!-- 给组件插槽 绑定vue实例对象中的title --><!-- v-bind:index="index" ==> :index="index" --><!-- v-on:click="show" @click="show" --><my-title slot="my-title" v-bind:title="title"></my-title><my-content slot="my-content" v-for="(item, index) in items":content="item" :index="index" :key="index"v-on:remove="removeItems(index)"> <!-- 自定义移除事件remove 并绑定了vue实例中的removeItems --></my-content></my-component></div><script>ponent('my-component', {/* 使用插槽代替 模板对象 */template:'<div>\<slot name="my-title"></slot>\<ul><slot name="my-content"></slot></ul>\</div>'})ponent('my-title', {props: ['title'],template: '<p>{{ title }}</p>'})ponent('my-content', {props: ['content', 'index'], // 定义index属性接收页面的绑定值template: '<li>{{ index }} ===== {{ content }} <button @click="remove">移除</button> </li>', //绑定了removemethods: {remove: function (index) {// 自定义事件分发 移除vue实例中的数据// alert('remove ..' + index)// 调用自定义函数 并传入参数this.$emit('remove', index)}}})let vm = new Vue({el: "#app",data: {title: 'a title',items: ['java', 'python', 'go']},methods: {removeItems: function (index) {// 从index这一位移除this.items.splice(index, 1);}}});</script></body></html>
