[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结构 ...
随机推荐
- 怎样用Windows10全屏流畅运行红色警戒2
https://jingyan.baidu.com/article/9113f81b1cb7f22b3214c724.html jpg 转 rar
- Linq EF 根据字符列表排序或List根据列表排序以及Linq查询类型转换
//model.BBSCategoryIDList=>{10,23,12}或者{1,3,2} //model.BBSCategoryIDs=>1,3,2或者10,23,12 //SqlFu ...
- MongoDB开篇
1.安装MongoDB 官方下载地址 https://www.mongodb.com/download-center#community 这个文件下载的有些奇怪,这个zip的文件下载下来和百度出来 ...
- 对Array进行排序（按字母顺序）
通过使用java.utils.Arrays.sort()和String.CASE_INSENSITIVE_OREDR,可以很容易的对结果进行排序(按字母顺序): String[] array = { ...
- JSON类库 Flexjson学习
官方地址(需FQ):http://flexjson.sourceforge.net/ Flexjson 是一个将 Java 对象转成 JSON 的 类库,是一个深度转换的过程. 下面是我写的一个例子: ...
- sencha touch Ext.Ajax.request 错误 Cannot call method 'request' of undefined 解决方案
凡是Cannot call method '' of undefined 这类错误大部分都可以参照下面的办法来解决 在st中有时候你会发现使用Ext.Ajax.request会出现一下错误: Cann ...
- linux各种版本下载地址
本文转载地址:http://52199999.blog.51cto.com/740826/290179 觉得好大家给顶顶,先谢谢了!呵呵 首先提供两个镜像站:http://mirrors.sohu.c ...
- Struts2之web元素访问与模板包含与默认Action使用
上一篇为大家介绍了如何使用Action进行参数接收,以及简单的表单验证,本篇为大家介绍一下关于Action访问web元素的三种方式(request.session.application):模板包含( ...
- Web Service Client使用Microsoft WSE 2.0
我安装了WSE 2.0 SP3,Setup Type选择Runtime.如果想要让Visual Studio 2005以上版本集成WSE需稍费周折,默认集成Visual Studio 2005. 1. ...
- SharePoint 2013部署自定义HttpModule访问SPContext.Current的一个问题
如果文档库post提交文档时,自定义HttpModule正好有代码访问SPContext.Current属性则会导致上传文档失败.