[vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick
思路:
1. 组件的好处,重用性
2. 组件对的slot用法
3. 子如何调用父的数据
4. 子如何触发父的方法执行
5. 父如何触发子的方法执行
6. 如何创建组件和销毁自建--如何缓存避免每次切换创建
研究一下组件的销毁
- componet是vue内置命令,用于调用显示子组件
is="home": 根据组件名html通过is=""获取.
如下我定义了两个组件,home,list,然后我在html里将2个组件显示出来
componet事实上是创建了组件.
<div id="app">
<h1>显示组件</h1>
<componet is="home"></componet>
<componet is="list"></componet>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
components: {
home: {
template: "<div>home</div>",
},
list: {
template: "<div>list</div>",
}
},
})
</script>
- 想要实现两个radio动态切换,类似页卡效果
- componet事实上是创建了组件.那么如何销毁组件呢
1.数据绑定到2个radio(注2个radio用value标识为一组)
2.componet获取radio的值作为自己获取的组件名
1.动态获取:is="radio"
<div id="app">
<h1>组件动态切换</h1>
home: <input type="radio" value="home" v-model="radio">
list: <input type="radio" value="list" v-model="radio"> <br>
<componet :is="radio"></componet>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
radio: 'home'
},
components: {
home: {
template: "<div>home</div>",
},
list: {
template: "<div>list</div>",
}
},
})
</script>
- 用vue生命周期函数,研究下切换componet时候,每次都存在创建,销毁, 浪费资源了.
1.使用created/mounted 标识创建前动作
2.使用beforeDestory 标识销毁前动作
- keep-alive命令缓存componet,不至于每次都销毁创建, 节约资源.
<div id="app">
<h1>组件动态切换</h1>
home: <input type="radio" value="home" v-model="radio">
list: <input type="radio" value="list" v-model="radio"> <br>
<keep-alive>
<componet :is="radio"></componet>
</keep-alive>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
radio: 'home'
},
components: {
home: {
template: "<div>home</div>",
mounted(){alert("创建前")},
beforeDestroy(){alert("销毁前")}
},
list: {
template: "<div>list</div>",
mounted(){alert("创建前")},
beforeDestroy(){alert("销毁前")}
}
},
})
</script>
1.先子组件的mounted
1,异步的,不会等dom渲染
2.在父组件的mounted
3.如果父操作子类的dom,要加上nextTick才能保证同步.(即子选mounted,后渲染,然后父mounted获取到子渲染后的数据)
mounted(){
console.log(this.$refs.child.$el.innerHTML); //<li>1</li><li>2</li><li>3</li>
},
mounted(){
this.$nextTick(()=>{ // 想操作dom 就加一个nextTick
console.log(this.$refs.child.$el.innerHTML); //<li>4</li><li>5</li><li>6</li>
})
},
<div id="app">
<child ref="child"></child>
</div>
<!--子组件和父组件同时拥有mounted方法 会先走谁？-->
<!--需要等待子组件挂载完成后在触发父组件的挂载-->
<template id="child">
<div>
<li v-for="a in arr">{{a}}</li>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
mounted(){
this.$nextTick(()=>{ // 想操作dom 就加一个nextTick
console.log(this.$refs.child.$el.innerHTML);
})
},
components:{
child:{
template:'#child',
data(){
return {arr:[1,2,3]}
},
mounted(){
this.arr = [4,5,6] // 此处是异步渲染dom
}
}
}
})
</script>
pannel栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>maotai http://www.zhufengpeixun.cn</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
<panel type="warning" @say-title="parent">
<div slot="title">这是一篇vue的使用</div>
<div slot="content">内容区
<p>组件的属性传递</p>
<p>slot的用法</p>
<p>ref的使用</p>
<p>nextTick的用法</p>
</div>
<div>作者:zfpx</div>
</panel>
</div>
<template id="panel">
<div class="panel" :class="[color]">
<div class="panel-heading" ref="head">
<slot name="title"></slot>
</div>
<div class="panel-body">
<slot name="content"></slot>
</div>
<div class="panel-footer">
<slot>匿名</slot>
<button @click="say">点我说标题</button>
</div>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let panel = {
template:'#panel',
computed:{
color(){return 'panel-'+this.type}
},
methods:{
say(){this.$emit('say-title',this.$refs.head.innerText)}
},
props:{
type:{ // this.type = 'primary'子不能更改父组件传递的属性
type:[String],
default:'default'
}
}
};
let vm = new Vue({
el:'#app',
methods:{
parent(tit){
alert(tit);
}
},
components:{
panel
}
});
</script>
</body>
</html>
pannel-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>maotai http://www.zhufengpeixun.cn</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
<panel :type="article.type" @say-title="parent" v-for="(article,index) in articles" :key="index">
<div slot="title"><span v-html="article.title"></span></div>
<div slot="content">{{article.content}}</div>
<div v-if="article.auth">{{article.auth}}</div>
</panel>
</div>
<template id="panel">
<div class="panel" :class="[color]">
<div class="panel-heading" ref="head">
<slot name="title"></slot>
</div>
<div class="panel-body">
<slot name="content"></slot>
</div>
<div class="panel-footer">
<slot>匿名</slot>
<button @click="say">点我说标题</button>
</div>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let panel = {
template: '#panel',
computed: {
color() {
return 'panel-' + this.type
}
},
methods: {
say() {
this.$emit('say-title', this.$refs.head.innerText)
}
},
props: {
type: { // this.type = 'primary'子不能更改父组件传递的属性
type: [String],
default: 'default'
}
}
};
let vm = new Vue({
el: '#app',
data: {
articles: [
{type: 'warning', title: '<h2>vue</h2>', content: '这是vue的文章', auth: '作者:zfpx'},
{type: 'primary', title: '<h2>react</h2>', content: '这是react的文章'},
{type: 'danger', title: '<h2>angular</h2>', content: '这是react的文章'},
]
},
methods: {
parent(tit) {
alert(tit);
}
},
components: {
panel
}
});
</script>
</body>
</html>
[vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick的更多相关文章
- vue - 组件的创建
组件的创建 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使 ...
- Vue组件component创建及使用
组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...
- [vue]webpack&vue组件工程化实践
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- [vue]组件最佳实战
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- vue 组件创建与销毁
vue 组件(如对话框组件)实时创建与销毁: 使用v-if <search-history :show="showSearchHistory" @close="sh ...
- vue组件创建学习总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- 使用VUE组件创建SpreadJS自定义单元格(一)
作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用.前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强.对于Vue而言,模块化的体现集中在组件之上,以组件为 ...
- vue组件创建的三种方式
1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...
随机推荐
- myeclipse环境优化
在项目右键打开Project > Properties > BUILDERS,打开source的tab,选择你的目录,删之~重启myeclipse 以下转载自百度知道 优化一下,下面内容都 ...
- 【WinForm程序】注册热键快捷键切换
重写DefWndProc事件 #region Window 消息捕获 const int WM_COPYDATA = 0x004A; public struct COPYDATASTRUCT { pu ...
- liunx trac 插件使用之GanttCalendarPlugin
http://trac-hacks.org/wiki/GanttCalendarPlugin官网上的说明很清楚,处理做几点提示,以做记录. 1.我的Trac版本是1.0.1 我使用了'B' Metho ...
- MFC 虚函数与消息映射区别
初学MFC添加函数时,总是纠结于是 Add windows message handler or Add virtual function 说到底不理解MFC中虚函数与消息处理函数的设计区别 本人理 ...
- CopyTo 方法详解
如果你就想复制一个字符串到另一个字符串,可以使用string的静态方法Copy 例如: string a = "hello"; string b = "world&quo ...
- backface-visibility 属性
图片img加了backface-visibility 属性, 图片变清晰, 原因不明 a,img{ backface-visibility:hidden; -webkit-backface-visib ...
- 改变presentModalView大小
rc.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal; rc.modalPresentationStyle = UIModalP ...
- 为什么局域网里有ip为10.10.10.1
10.0.0.1 是私有地址,用来给局域网络分配主机地址的. A类地址 (1)A类地址第1字节为网络地址,其它3个字节为主机地址.它的第1个字节的第一位固定为0. (2)A类地址网络号范围:1.0.0 ...
- Android系统dimension单位详解
转载请注明出处,谢谢!http://www.cnblogs.com/coding-way/p/3457878.html Android设备种类多样,要想适配好各种屏幕,理解各种屏幕数据是必须的.首先先 ...
- 判断强联通图中每条边是否只在一个环上（hdu3594）
hdu3594 Cactus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...