生活随笔
收集整理的這篇文章主要介紹了
vue自定义组件，插槽，自定义事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue組件套娃
- 1. vue自定義組件
- 2. 組件和插槽套娃
- 3. vue組件通過自定義事件更改vue實例中的數據
1. 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
>
<div id="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
>
<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"><lover></lover><hr/><bitqian v-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>
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"><my-component v-for="item in items" v-bind:language="item"></my-component></div><div id="app1"><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.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>
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><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)"> </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>
總結
以上是生活随笔為你收集整理的vue自定义组件，插槽，自定义事件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
