[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结构 ...
随机推荐
- Objective-c官方文档 封装数据属性
版权声明:原创作品,谢绝转载!否则将追究法律责任. 很多对象需要跟踪信息为了执行他们的任务.一些对象设计模型一个或者多个值.例如NSNumber 类用来保存一个值或者自定义的类有一些属性.有一些对象不 ...
- RAID在数据库存储上的应用
随着单块磁盘在数据安全.性能.容量上呈现出的局限,磁盘阵列(Redundant Arrays of Inexpensive/Independent Disks,RAID)出现了,RAID把多块独立的磁 ...
- stylus--css 框架使用方法
Stylus是一款需要编译的css语言,所以其本身文件不能被html直接调用,需要要编译为css文件后再进行日常的加载. stylus是一款优秀的css编译语言,需要node.js支持,第一步需要 ...
- 【Web前端开发最佳实践系列】标准的HTML代码
一.验证代码是否符合标准 优点: 标准的页面会保证浏览器正确的渲染 网页能更容易被搜索引擎搜索,提高网站的搜索排名 提高网站的易用性 网页更好维护和扩展 常用工具: W3 Validator HTML ...
- 原生js--HTTP进度事件
1.HTTP进度事件属于XHR2规范定义的系列事件 2.事件模型中会触发不同的事件,所以不再需要检查readyState事件 3.当调用send()时,触发loadstart事件 4.当正在加载服务器 ...
- Android 验证APK是否已经签名或是否是Debug签名
https://source.android.google.cn/ http://www.android-doc.com/tools/publishing/app-signing.html Signi ...
- Windows Server 2012升级R2过程中意外关闭恢复原系统方法
2012升级R2过程中强制关闭了计算机,导致再次启动后蓝屏提示"BAD_SYSTEM_CONFIG_INFO".用2012安装盘进入尝试修复失败(安全模式什么的都不用想),进入命令 ...
- Android电话拨号器_06
在Android模拟器中开发时,有时需要模拟拨打电话功能,由于模拟器不能直接当做真机使用,所以我们需要再模拟器中模拟真机拨打电话,首先需要创建两个模拟器,当做两部Android手机来使用.由于Andr ...
- 第一个maven项目
1.新建maven project 注意:勾上create a new simple project 2.填写相关信息, Grounp id为大项目名字,Artifact id为小项目的名字.注意:P ...
- Making Promises With
转:Making Promises With http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-defe ...