标题
内容
组件中的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>
### 总结
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)
**JavaScript**
![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)
**前端资料汇总**
![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)