Vue组件，前端开发入门到精通

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：docs.qq.com/doc/DSmRnRG…

var vm = new Vue({

el: '#app',

});

效果截图：

上面代码中有两个注意事项：

1. 组件模板的内容，可以写在一对反引号中（``），这样就可以不使用字符串拼接的形式了。

2. 一个组件的data选项必须是一个函数，该函数返回一个对象。

局部组件

---

如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。 因此我们可以将上面的全局组件改为局部组件。

样例代码：

效果截图：

组件模板

---

如果组件中的template内容过多，那么可以使用组件模板来声明template中的内容。

样例代码：

效果截图：

父子组件

==============================================================

当我们继续在组件中写组件，形成组件嵌套的时候，就是我们所说的父子组件了。

样例代码：

效果截图：

组件之间的通信

=================================================================

组件与组件之间是可以互相通信的。包括父子组件之间、兄弟组件之间等等，都可以互相通信。 下面只讨论父子组件之间通信问题。

子组件获取父组件数据

---

在vue中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的，也就是说，子组件是不能直接访问父组件的数据的。为此，vue给我们提供了一个数据传递的选项prop，用来将父组件的数据传递给子组件。具体使用如下：

样例代码：

效果截图：

上面实例中，子组件获取父组件传递的数据的步骤为：

**1. 在子组件标签中，声明 msg 属性，属性值即为父组件向子组件传递的值。

2. 在子组件中，使用props选项，声明接收父组件向子组件传递值的载体，即 ‘msg’ 。

3. 子组件中就可以使用 msg 获取父组件向子组件传递的值了。**

也可以使用 v-bind 绑定子组件标签属性，这样就可以将父组件data数据传递个子组件了。

父组件获取子组件数据

---

和上面不一样的是，父组件想要获取子组件的数据时，需要子组件通过emit主动将自己的数据发送给父组件。

样例代码：