最新2021vue面试题（面试10+公司汇总）
vue面试题
vue优点
- 轻量级框架，只关注视图层
- 简单易学，有中文开发文档
- 双向数据绑定
- 组件化
- 视图、数据、结构分离
vue父组件向子组件传递数据
-
通过props:父组件向子组件传值就是通过在父组件中让子组件标签绑定父组件的数据，子组件的props接收父组件穿过来的值即可。
-
<body><div id="app"><my-child msg="hhhhh"></my-child></div> </body> <template id="child"><!-- 子组件有且仅有一个最外层元素 --><div>{{msg}}</div> </template> </body> -
<script>new Vue({el: "#app",components: {'my-child': {template: '#child',props: ['msg']}}}) </script>
子组件向父组件传递事件
-
$emit方法：子传父的实现方式就是用了
this.e m i t来 遍 历g e t D a t a事 件 ， 首 先 用 按 钮 来 触 发s e t D a t a事 件 ， 在s e t D a t a中 用t h i s . emit来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，最后返回 this.msg -
<body><div id="app"><!-- 第一步 ： 父组件在调用了子组件的地方，绑定一个自定义事件（myevent）事件的定义由父组件实现。在实现的拥有默认的参数（val），值就是子组件传递给父组件的值--><my-child @myevent='getData'></my-child></div> </body> <template id="child"><!-- 在子组件的某一个事件内部，通过this.$emit('自定义的事件'，传递的参数) 传递值给父组件。--><div>子组件<input type="button" value="发送数据" @click='sendData'></div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>let app = new Vue({el: '#app', // 挂载点components: { // 组件 ---> 需要注册的组件'my-child': { // 子组件的名字template: '#child', // 模板 ---> 可以是html结构 也可以是挂载点 methods: { // 子组件内触发这个方法sendData() {this.$emit('myevent', '这个数据是有子组件传递的')}}}},methods: {getData(val) { // 事件的定义由父组件实现console.log(val);}}}) </script>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！