vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据
Vue. component ( '自定义组件名' , { props: [ 'var1' , 'var2' , 'var3' ] , template: '<p>{{ var1 }}</p>'
} )
< script> Vue. component ( 'lover' , { template: '<p>taylor swift - lover.mp3</p>' } ) ; let app = new Vue ( { el: "#app" , data: { } } ) ;
< / script> < divid = " app" > < lover> </ lover> </ div> < script>
Vue. component ( "bitqian" , { props: [ 'language' ] , template: '<li>{{ language }}</li>'
} ) ; let app = new Vue ( { el: "#app" , data: { items: [ "java" , "python" , "go" ] }
} ) ; < / script>
< bitqianv-for = " item in items" v-bind: language= " item" v-bind: key= " item.index" > </ bitqian> <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ../js/vue.js" > </ script> </ head> < body> < divid = " app" > < lover> </ lover> < hr/> < bitqianv-for = " item in items" v-bind: language= " item" v-bind: key= " item.index" > </ bitqian> </ div> < script> Vue. component ( 'lover' , { template: '<p>taylor swift - lover.mp3</p>' } ) ; Vue. component ( "bitqian" , { props: [ 'language' ] , template: '<li>{{ language }}</li>' } ) ; let app = new Vue ( { el: "#app" , data: { items: [ "java" , "python" , "go" ] } } ) ; </ script> </ body> </ html> 插槽<slot></slot>，就是一个孔，可以套vue组件 用组件套组件的方式代替普通的html标签 <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ../js/vue.js" > </ script> </ head> < body> < divid = " app" > < my-componentv-for = " item in items" v-bind: language= " item" > </ my-component> </ div> < divid = " app1" > < demo-component> < demo-titleslot = " demo-title" v-bind: title= " title" > </ demo-title> < demo-itemslot = " demo-item" v-for = " (item, index) in items" :item = " item" v-bind: index= " index" > </ demo-item> </ demo-component> </ div> < script> Vue. component ( 'my-component' , { props: [ 'language' ] , template: '<li>{{ language }}</li>' } ) new Vue ( { el: "#app" , data: { items: [ 'c' , 'cpp' , 'object-c' ] } } ) Vue. component ( 'demo-component' , { template: '<div>' + '<slot name="demo-title"></slot>' + '<ul>' + '<slot name="demo-item"></slot>' + '</ul>' + '</div>' } ) Vue. component ( 'demo-title' , { props: [ 'title' ] , template: '<p>{{ title }}</p>' } ) Vue. component ( 'demo-item' , { props: [ 'item' , 'index' ] , template: '<li>{{ index }}=========={{ item }} </li>' } ) let vm = new Vue ( { el: "#app1" , data: { title: '后端语言' , items: [ 'java' , 'python' , 'go' , 'linux' ] } } ) </ script> </ body> </ html> this.$emit(‘functionName’, params…)实现自定义事件 <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ../js/vue.js" > </ script> </ head> < body> < divid = " app" > < my-component> < my-titleslot = " my-title" v-bind: title= " title" > </ my-title> < my-contentslot = " my-content" v-for = " (item, index) in items" :content = " item" :index = " index" :key = " index" v-on: remove= " removeItems(index)" > </ my-content> </ my-component> </ div> < script> Vue. component ( 'my-component' , { template: '<div>\<slot name="my-title"></slot>\<ul><slot name="my-content"></slot></ul>\</div>' } ) Vue. component ( 'my-title' , { props: [ 'title' ] , template: '<p>{{ title }}</p>' } ) Vue. component ( 'my-content' , { props: [ 'content' , 'index' ] , template: '<li>{{ index }} ===== {{ content }} <button @click="remove">移除</button> </li>' , methods: { remove: function ( index) { this . $emit ( 'remove' , index) } } } ) let vm = new Vue ( { el: "#app" , data: { title: 'a title' , items: [ 'java' , 'python' , 'go' ] } , methods: { removeItems: function ( index) { this . items. splice ( index, 1 ) ; } } } ) ; </ script> </ body> </ html>
