vue组件的详解
2018-03-06 本文已影响0人
十年之后_b94a
1>基本组件的介绍
前言在组件定义中 自定义html元素是不允许驼峰命名的和动态绑定的数据
//正确的
<my-test :list-data="list"></my-test>
props:['listData'] 或者props['list-data']
//错误的
<myTest :listData="list"></myTest>
1-1 全局组件
//html
<div id="app">
<my-test></my-test> <!--组件的标签-->
</app>
Vue.component('my-test',{ //注册组件
template:`<ul>
<li>初学组件</li>
<li>初学组件2</li>
</ul>`
})
new Vue({
el:"#app"
})
1-2局部组件
//html
<div id="app">
<my-test></my-test> <!--组件的标签-->
</div >
new Vue({
el:"#app",
components:{
'my-test':{
template:`<ul>
<li>初学组件</li>
<li>初学组件2</li>
</ul>`
}
}
})
2>组件的通信
利用props进行 父-->子通信
以全局组件为例
<div id="app">
<my-test v-bind:list="list-data"></my-test> <!--利用v-bind绑定数据-->
</div>
Vue.component('my-test',{ //注册组件
props:['list'], //这里是props属性 这里的list就是自定义标签上的
template:`<ul>
<li v-for="item in list">{{item}}</li>
</ul>`
});
new Vue({
el:"#app",
data:{
listData:['初学Vue','vue的组件']
}
})
局部组件
new Vue({
el:"#app",
data:{
listData:['初学Vue','vue的组件']
},
components:{
'my-test':{
props:['list'],
template:`<ul>
<li v-for="item in list">{{item}}</li>
</ul>`
}
}
})
3>多重组件嵌套的通信
<div id="app">
<my-test :list="vueList" :child-list="vueListChild"></my-test>
</div>
Vue.component('my-test',{
props:['list','childList'],
template:`
<ul>
<li v-for="item in list">{{item}}</li>
<li>
<child-list :listData="childList"></child-list>
</li>
</ul>
`
})
Vue.component('child-list',{
props:['listData'],
template:`
<ul>
<li v-for="item in listData">{{item}}</li>
</ul>
`
})
new Vue({
el:"#app",
data:{
vueList:['北京','上海','深圳'],
vueListChild:['中国','美国','英国','俄罗斯']
}
})
4> 子->父通信 利用自定义通信
this.$emit
<child-item :btn-num="addSum" v-on:addFn="parentFn"></child-item>
这个自定义的addFn在子组件中定义
父组件用v-on:eventName 绑定自定义事件
子组件
<li v-for="item in btnNum">一次增加<button @click="addTodo(item)">{{item}}</button></li>
methods:{
addTodo(num){
this.$emit('addFn',num);
}
}
一个小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<my-test :count-data="count" :add-sum="addSum"></my-test>
</div>
<script>
Vue.component('myTest',{
props:['countData','addSum'],
data:function(){
return {
sum:this.countData
}
},
template:`
<ul>
<li>{{sum}}</li>
<li>
<child-item :btn-num="addSum" v-on:addFn="parentFn"></child-item>
</li>
</ul>
`,
methods:{
parentFn(data){
this.sum += data;
}
}
});
Vue.component('childItem',{
props:['btnNum'],
template:`
<ul>
<li v-for="item in btnNum">一次增加<button @click="addTodo(item)">{{item}}</button></li>
</ul>
`,
methods:{
addTodo(num){
this.$emit('addFn',num);
}
}
});
new Vue({
el:"#app",
data:{
count:100,
addSum:[1,2,3,4,5,6]
}
})
</script>
</body>
</html>
image.png
5>props数据的验证
<div id="app">
<my-test :count-num="count"></my-test>
</div>
new Vue({
el:"#app",
data:{
count:20
}
});
Vue.component('myTest',{
props:{
countNum:{
type:Number, //类型为数字
default:0 //设置默认值
}
}
})
6>slot自定义组件标签中可以添加内容
如果在注册组件中没有使用slot的情况，那么标签中的元素会被替换掉
<div id="app">
<my-test>
<div>我是原始div</div>
</my-test>
</div>
//js
Vue.component('myTest',{
template:`
<ul>
<li>第一个LI</li>
<slot></slot>
<li>第二个LI</li>
<li>第三个LI</li>
</ul>
`
})
new Vue({
el:"#app"
})
image.png
替换指定的slot
image.png
7）组件状态的保持(重要)
<keep-alive>
<my-header></my-header>
</keep-alive>
把需要保持状态的组件用keep-alive包起来，就不会被vue生命周期重新走一遍，保持状态了，即使请求数据也不会请求了
8）解决当vue 跳转相同路由不同参数页面不刷新
案例:比如场景用户进行搜索，然后跳转到搜索页面，而到了搜索页面用户继续点击搜索那么参数不会改变
watch: {
//监听相同路由下参数变化的时候，从而实现异步刷新
'$route'(to,from){
},
},
