<div>
<h2>标题</h2>
<p>内容</p>
</div>
```
组件中的data为什么是函数
<script>
// 1.注册组件
Vue.component('cpn',{
template:'#cpn',
// data()必须是个函数,不是函数也会报错,
//data:{}这样多个调用都指向一个内存地址一个变一起变,
// data()这样每次调用就会有一个新的内存地址,自己改自己的内存东西
// 每一个组件实例都有自己的状态,他都需要一个对象来保存属于自己的状态
data(){
return {
counter:0
}
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
</script>
组件通信父传子props
<div id="app">
<!-- <cpn v-bind:cmovies="movies" :cmessage="message"></cpn> -->
<!-- 这里只负责赋值了,没有输出 -->
<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>
<!-- 组件模板 -->
<template id="cpn">
<!-- 内部代码多必须有个根标签包裹,比如这个div -->
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<script>
//父传子props
const cpn = {
template: '#cpn',
// 一。数组方式
// props:['cmovies','cmessage'],
// 二。对象方式
props: {
// 1.类型限制
// cmovies:Array,
// cmessage:String,
// 2.给字符串提供一些默认值
cmessage: {
// 类型
type: String,
// default当别人没传值的默认值
default: 'aaaaa',
// required必须传值
required:true
},
// 给数组设置
// 类型是对象或数组时,默认值default必须是一个函数
cmovies:{
type:Array,
default(){
return []
}
}
},
data() {
return {}
},
methods: {
}
}
// 父组件,实例
const app = new Vue({
el: '#app',
data: {
message: '你好吖',
movies: ['海王', '海贼王', '海尔兄弟']
},
// components注册组件
components: {
// 相当于cpn:cpn ,是es6的增强写法
cpn
}
});
</script>
组件通信子传父$emit(发射事件)
<!-- 父组件模板 -->
<div id="app">
<cpn @item-click="cpnClick"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">
{{item.name}}
</button>
</div>
</template>
<script>
// 1.子组件
const cpn = {
template:'#cpn',
data(){
return {
categories:[
{id:'aaa',name:'热门推荐'},
{id:'bbb',name:'手机数码'},
{id:'ccc',name:'家用家电'},
{id:'ddd',name:'电脑办公'}
]
}
},
methods:{
btnClick(item){
//$emit 发射事件:自定义事件
// 子传父就是通过自定义事件传递的
// item-click自定义事件的名字,item自定义事件的参数
this.$emit('item-click',item)
}
}
}
// 2.父组件
const app = new Vue({
el: '#app',
data: {},
methods: {
cpnClick(item){
// 获取到了子组件cpn里的对象属性
console.log(item);
}
},
components:{
cpn
}
});
</script>
组件访问父访问子
<div id="app">
<cpn></cpn>
<cpn ref="aaa"></cpn>
<button @click="btnClick">按钮</button>
</div>
<template id="cpn">
<div>
我是子组件
</div>
</template>
<script>
const app = new Vue({
el: '#app',
data: {},
// methods装函数
methods: {
btnClick(){
// 2.$refs是对象类型,默认是一个空的对象,必须在组件上加 ref='bbb'
,一般用这个 直接锁定元素
console.log(this.$refs.aaa.name);
}
},
// components注册组件
components:{
cpn:{
template:'#cpn',
data(){
return {
name:'我是子组件的name'
}
},
methods:{
showMessage(){
console.log('showMessage');
}
}
}
}
});
组件访问子访问父
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是cpn组件</h2>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<h2>我是子组件</h2>
<button @click="btnClick">按钮</button>
</div>
</template>
<script>
const app = new Vue({
el: '#app',
data: {},
// methods装函数
methods: {
},
### 文末
我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。
首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。
更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/1471537bfd3f5a483690ca477fd3f2b9.png)
**JavaScript**
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)
**性能**
![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)
**linux**
![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)
**前端资料汇总**
![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)