vue笔记（三）生命周期、组件（嵌套）、数据传递

生命周期文档

一、生命周期

1、参考一
2、参考二

二、自定义组件

1. 使用：<组件名></组件名>

2. 定义组件：
（1）方法一：官网

let 组件变量名 = Vue.extend({template:`<div class="header">我是header组件</div>`
});

（2）方法二（常用）：let 组件变量名 = {};

3. 注册：
（1）全局：

Vue.component('组件名',组件变量名);

（2）局部：

components:{组件名:组件变量名
}

4. 示例：
（1）定义的第一种方法及全局注册

<!-- 使用 -->
<v-header></v-header>//定义和注册：
let Header = Vue.extend({name:'别名，可以在调试工具中打印出来，与代码无关'template:`<h3>我是头部</h3>`,data(){return {'msg':'可以在这里定义数据，到template中使用'}}
})
Vue.component('v-header',Header);

（2）定义的第二种方法及全局注册
类似于（1），定义组件的时候都可以写method，data()等；

<!-- 使用 -->
<v-main></v-main>//定义和注册：
//推荐使用该方法
let mains = {template:`<div>内容部分</div>`
}
Vue.component('v-main',mains)

（3）局部注册（注意使用时的变量名及注册时的变量名）

<!-- 使用 -->
<v-foot></v-foot>
<my-foot></my-foot>//定义和注册：
//推荐使用该方法
let myFoot = {template:`<div>最底部</div>`
}
components:{      // 'v-foot':foots'v-foot':{template:'<div>底部</div>'},myFoot, //相当于'my-foot':myFoot
}

（4）将 template 中的语句写到模板中

<!-- 使用 -->
<div id="app"><v-header></v-header>
</div><!-- 注意 template 的位置，写在 <div id="#app"></div> 下面 -->
<!-- template 作为组件模板，需要有一个根元素把它包裹起来 -->
<template id="v-header"><div>	<h3>我是头部组件</h3><p>这是我的数据{{msg}}</p><button @click="show">按钮</button></div>
</template>let Header = {template:`#v-header`,data(){return {'msg':"数据"}},methods:{show(){alert('方法');}}
}let vm = new Vue({el:"#app",components:{'v-header':Header}
}

5. 嵌套组件

<div id="app"><box></box>
</div><template id="box"><div><h3>{{msg}}</h3><box-child></box-child></div>
</template><template id='boxChild'><div><h3>{{msg}}</h3></div>
</template>let boxChild = {template:`#boxChild`,data(){return {msg:"我是box组件中的子"}}}let box= {template:`#box`,data(){return {msg:"内容组件"}},components:{"box-child":boxChild}
}let vm=new Vue({el:"#app",components:{box}
})

三、组件之间的数据传递可参考

赋值之间共享数据和方法：
<子 ref="自定义子名称"></子>
（1）父访问子：this.$refs.自定义子名称.数据名/方法()；
（2）子访问父：this.$parent.数据名/方法()

数据传递的方向
父 -> 子，子 -> 父，子 -> 子（平级传递）
解决数据传递的方法
（1）框架（父 <->子）；
（2）订阅发布模式（pubsub | 自行封装 | Vue模拟）；
（3）web 存储（cookie，localStorage，session）；
（4）存库；
（5）状态管理；

（1）父 -> 子（属性：props）
父组件中：<子组件名称自定义属性 = "父数据"></子组件名称>
子组件选项中：

props:['自定义属性']
//或
props:{自定义属性：{type:String/Boolean/Number等,default:"初始值、默认值",required:true}
}

展示：{{自定义属性}}

（2）子 -> 父
父组件中：<子组件名称 @自定义事件 = "父方法"></子组件名称>
子： this.$emit('自定义事件',子.数据名);
父： methods -> 父方法(接收数据){处理}

<div id="app"><div>父组件</div><child @send-parent="getData"></child>
</div><template id="child"><div>        <h3>子组件组件</h3><p>这是我的数据{{msg}}</p><div @click="show">按钮</button></div>
</template>let child = {template:`#child`,data:function(){return {msg:"数据"}},methods:{show(){alert('方法');}},mounted(){this.$emit('send-parent',this.msg);//mounted时数据就被渲染出来了} 
}let vm=new Vue({el:"#app",components:{      child},methods:{getData(data){console.log(data)}}
})