Vue content distribution
9, Content distribution
In Vue.js, we use the < slot > element as the exit to carry the distribution content. The author calls it a slot, which can be applied in the scenario of composite components;
1. Test content distribution:
For example, prepare to make a to-do component (todo), which is composed of to-do title and to-do items (nested components using slot slots):
//Define a list component
Vue.component("todo",{
template:"<div>\
<slot name='todo-title'></slot>\
<ul>\
<slot name='todo-items' ></slot>\
</ul>\
</div>"
})
//title
Vue.component("todo-title",{
props:["title"],
template: "<div>{{title}}</div>"
})
//list
Vue.component("todo-items",{
props:["items"],
template:"<li>{{items}}</li>"
})
Initialization data:
var vm = new Vue({
el:"#app",
data:{
title:["Back end course"],
todoItems:["java","mysql","linux"]
}
});
Bind data and components:
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :items="item"></todo-items>
</todo>
</div>
Tips: v-bind can be abbreviated to * *: * *, and v-on can be simplified to**@**
Full code:
<!DOCTYPE html>
<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :items="item"></todo-items>
</todo>
</div>
<!--Import Vue.js-->
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//Define a list component
Vue.component("todo",{
template:"<div>\
<slot name='todo-title'></slot>\
<ul>\
<slot name='todo-items' ></slot>\
</ul>\
</div>"
})
//title
Vue.component("todo-title",{
props:["title"],
template: "<div>{{title}}</div>"
})
//list
Vue.component("todo-items",{
props:["items"],
template:"<li>{{items}}</li>"
})
var vm = new Vue({
el:"#app",
data:{
title:["Back end course"],
todoItems:["java","mysql","linux"]
}
});
</script>
</body>
</html>
2. Custom event
Through the above code, it is not difficult to find that the data items are in the Vue instance, but the deletion operation needs to be completed in the component. How can the component delete the data in the Vue instance? At this time, it involves parameter passing and event distribution. Vue provides us with the function of customizing events, which helps us solve this problem; use this. $emit (user defined event name, parameter), the operation process is as follows:
- Add a delete method to the Vue instance:
var vm = new Vue({
el:"#app",
data:{
title:["Back end course"],
todoItems:["java","mysql","linux"]
},
methods:{
removeItems:function (index) {
this.todoItems.splice(index,1)
}
}
});
- Use this.$emit to customize delete events:
Vue.component("todo-items",{
props:["items","index"],
template:"<li>{{index}}--{{items}}  <button @click='remove'>delete</button></li>",
methods: {
remove:function (index) {
this.$emit("remove",index)
}
}
})
- Bind delete event and delete method:
<todo-items slot="todo-items" v-for="(item,index) in todoItems" :items="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
- Full code:
<!DOCTYPE html>
<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems" :items="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
<!--Import Vue.js-->
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//Define a list component
Vue.component("todo",{
template:"<div>\
<slot name='todo-title'></slot>\
<ul>\
<slot name='todo-items' ></slot>\
</ul>\
</div>"
})
//title
Vue.component("todo-title",{
props:["title"],
template: "<div>{{title}}</div>"
})
//list
Vue.component("todo-items",{
props:["items","index"],
template:"<li>{{index}}--{{items}}  <button @click='remove'>delete</button></li>",
methods: {
remove:function (index) {
this.$emit("remove",index)
}
}
})
var vm = new Vue({
el:"#app",
data:{
title:["Back end course"],
todoItems:["java","mysql","linux"]
},
methods:{
removeItems:function (index) {
this.todoItems.splice(index,1)
}
}
});
</script>
</body>
</html>
3. Vue getting started summary
Core: data driven, componentization
Advantages: the modular development of AngularJS and the virtual Dom of React are used for reference. The virtual Dom is to put the Demo operation into memory for execution;
Common attributes:
v-if v-else-if v-else v-for v-on Binding event, short for@ v-model Data bidirectional binding v-bind Bind parameters to components, abbreviated as:
Componentization:
Combined components slot slot
Component internal binding events need to use this.$emit("Event name",parameter);
Features of calculation attributes, cache calculation data
Following the principle of separation of SoC concerns, Vue is a pure view framework and does not include communication functions such as Ajax. In order to solve the communication problem, we need to use the Axios framework for asynchronous communication;
explain
Vue development is based on NodeJS. The actual development adopts Vue cli scaffold development, Vue router routing and vuex for state management; for Vue UI, we generally use ElementUI (produced by hungry) or ICE (produced by Alibaba) to quickly build front-end projects~~
Official website:
https://element.eleme.cn/#/zh-CN https://ice.work/