Vue:简单了解组件,面试高频题目

65 阅读1分钟

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等

前端视频资料: 开源分享:docs.qq.com/doc/DSmRnRG… ]

}

})

组件的监听子组件事件

主要通过子组件的 $emit 方法并传入事件名触发事件

emit可以使用第二个参数向上抛值,监听的父组件通过event获取

<my-p v-for="item in list"

:title="item.title"

@addsize="size += event"><!event"> <!-- event获取子组件通过$emit抛的值 -->

Vue.component('my-p',{

props:['title'], //props向子组件传递数据

template:`

{{title}}

<button @click="$emit('addsize',10)">点击放大

`

//子组件通过 $emit 方法并传入事件名触发事件

//emit可以使用第二个参数向上抛值,监听的父组件通过emit可以使用第二个参数向上抛值,监听的父组件通过event获取

})

new Vue({

el:"#app",

data:{

list:[

{ id: 1, title: '这是第一个' },

{ id: 2, title: '这是第二个' },

{ id: 3, title: '这是第三个' }

],

size:14

}

})

组件中v-model的实现

当input事件触发时,通过$emit对数据进行抛出

{{myText}}

Vue.component('my-input', {

props: ['value'],//通过props动态数据传递

template: `

<input

:value="value"

@input="emit(input,emit('input', event.target.value)"

`

// input事件触发时,通过$emit对数据进行抛出

})

new Vue({

el:"#app",

data:{

myText:''

}

})

动态组件

通过:is实现tab切换效果

<button

v-for="item in list"

@click="currList = item">{{item}}

Vue.component("my-div", {

template: "

Home component
"

});

Vue.component("my-div2", {

template: "

Posts component
"

});

new Vue({

el:"#app",

data:{

list:['div','div2'],

currList:'div'

},

computed:{

curr: function() {

return "my-" + this.currList;

//修改组件的curr值改变组件的显示

最后

基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack、git、node学习的再好也无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多,并不是理解就ok了,有些是真的要去记。当然了我们是牛x的前端工程师,每天像背英语单词一样去背知识点就没必要了,只要平时工作中多注意总结,面试前端刷下题目就可以了。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】