这里写目录标题
一.昨日回顾
1 局部组件
-全局组件,局部组件
2 组件编写方式与Vue实例的区别
-数据不共享
-组件中的data必须是个函数
3 组件通信之父子通信
-在组件上加一个属性 mytext='值' :mytext='js变量/代码'
-props:['mytext',]
-属性验证props:{mytext:String}
4 组件通信之子传父
-通过事件
-在子组件中绑定事件(给按钮绑定事件,在函数中执行:this.$emit('myevent',100,this.name,99))
-会触发组件上<child @myevent='handleClick'></child>
5 组件通信之子传父案例
6 ref属性
-<div ref='xxx'></div>
-<child ref='child1'></child>
-放在标签上 this.$refs.xxx ---> dom
-放在组件上 this.$refs.child1--->组件对象--》对象中的数据，函数，可以直接使用
7 事件总线
-不同组件之间通信Vue的实例(对象) var bus=new Vue()
-两个组件通信:一个需要监听,一个需要发送
-监听
bus.$on('suibian',(item)=>{
console.log('收到了',item)
this.recv_text=item
})
-发送
bus.$emit('suibian',this.text)
8 动态组件
-在html中使用时
<keep-alive>
<component :is="who"></component>
</keep-alive>
9 插槽
-在组件child中预留插槽
<div>
<slot></slot>
<hr>
我是首页
<slot></slot>
<input type="text">
</div>
-在父组件中使用
<child>标签,数据</child>
10 具名插槽
<div>
<slot name='a'></slot>
<hr>
我是首页
<slot name='b'></slot>
<input type="text">
</div>
-父组件中使用
<child>
<div slot='a'>放到a中</div>
<div slot='b'>放到b中</div>
</child>
二.今日内容
1.生命周期
表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数
钩子函数: 满足特点条件被回调的方法
1.mounted用的最多:向后端发送请求,定时器初始化
2.destroyed:组件销毁—>给组件写一个定时器—>组件销毁,定时器清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<child v-if="isShow"></child>
{
{name}}
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>我是组件的div</div>`,
data(){
return {
t:null,
}
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
//用的最多，向后端加载数据，创建定时器等
console.log("页面已被vue实例渲染, data, methods已更新");
console.log('mounted')
//起一个定时器，每隔三秒，打印一行
this.t = setInterval(function (
最低0.47元/天 解锁文章
1358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
