vue 组件基本原理详解

98 阅读 0 评论 65 点赞

我是靠谱客的博主土豪眼神，最近开发中收集的这篇文章主要介绍vue 组件基本原理详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<template id="myaddress">
<!--组件模块-->
<div>
<h2>{{address}}</h2>
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<input type="text" v-focus>
</div>
</template>
<template id="myrow">
<tbody>
<tr>
<td>1234321</td>
</tr>
</tbody>
</template>
<template id="myslot">
<div>
<slot name="s1"></slot>
<h3>组件</h3>
<slot name="s2"></slot>
</div>
</template>
<div id="box">
<hello></hello>
<world></world>
<my-address></my-address>
<!--需要写组件名就可以-->
<my-address></my-address>
<table>
<!--<my-row></my-row>-->
<!--上 写法 会显示在table 外面
正确写法 下-->
<tbody is="my-row"></tbody>
<!--链接关联标签-->
</table>
<!--slot
内容嵌套调用-->
<my-slot>
<ul slot="s1">
<li>嵌套组件内部组件1111111</li>
</ul>
<ul slot="s2">
<li>嵌套组件内部组件22222222222222</li>
</ul>
</my-slot>
<!--动态模板
可以动态添加的组件-->
<!--切换-->
<button @click="flag='my-address'">address</button>
<button @click="flag='my-slot'">slot</button>
<my-address v-if="flag=='my-address'"></my-address>
<my-slot
v-if="flag=='my-slot'">
<ul slot="s1">
<li>嵌套组件内部组件1111111</li>
</ul>
<ul slot="s2">
<li>嵌套组件内部组件22222222222222</li>
</ul>
</my-slot>
<!--动态组件-->
<keep-alive>
<!--heep-alive 缓存非活动组件
如随机数加在这标签内切换就不会变化
不然刷新一次变化一次-->
<component :is="flag"></component>
<!--导入对应的组件-->
</keep-alive>
<my-hello1></my-hello1>
<my-hello2></my-hello2>
</div>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
//组件创建方式1
var myComponent = Vue.extend({
template:'<h2>hello</h2>>'
})
Vue.component('hello',myComponent)
//方式2
Vue.component('world',{
template:'<h2>world</h2>>'
})
var vm = null;
vm = new Vue({
el: "#box",
data: {
name:'moris',
age:22,
user:{
id:100,
name : '111'
},
flag:'my-address'
},
components:{
//局部里面components
后面加s
'my-address':{
template:'#myaddress',
data(){
// 组件是个独立的存在 有属于自己的 data
组件里面data 要加return
return {
address:"wuhang",
arr:['a','b']
}
},
directives:{
//自定义指令
focus:{
inserted(el){
//当前绑定元素扎入Dom中
el.focus();
}
}
}
},
'my-row':{
template:'#myrow',
data(){
return {
address:"wuhang11111",
arr:['a','b']
}
},
},
'my-solt':{
template:'#mysolt',
data(){
return {
address:"wuhang11111222222222222",
arr:['a','b']
}
},
},
'my-hello1':{
template:'<h3>aa:{{x}}</h3>>',
data(){
return {
x:Math.random()
}
},
},
'my-hello2':{
template:'<h3>bb:{{y}}</h3>>',
data(){
return {
y:Math.random()
}
},
},
},
})
</script>
</body>
</html>