这次给大家带来Vue.js组件的使用方法，Vue.js组件使用的注意事项有哪些，下面就是实战案例，一起来看一下。
1. 所有Vue组件同时也都是Vue实例，分为全局组件和局部组件，注册方式如下。
注意：
a. 如
- 、
- 、
等父子元素有限制的元素，不能直接使用组件模板，可由is属性来指定，如 。若使用来自以下来源之一的字符串模板（允许嵌入表达式的字符串字面量），则没有这些限制： 1)
2) JavaScript 内联模板字符串:
Vue.component('component1',{ template: 'child component
' });3) .vue 组件
b. 组件实例中 data 必须是一个函数，否则会给每个组件实例返回对同一个对象的引用
2. 父子组件组合使用
a. 父组件传递数据给子组件
1) 在子组件中由props声明预期数据。
2) 属于单向数据流，子组件不能直接修改prop。
3) 若要设置prop类型验证，则不能用字符串数组，应定义:
props:{ propA: Number, propB: [String, Number] }4) 若要添加非prop属性，则在使用子组件时，在标签中设置该属性="true"。
b. 子组件触发父组件事件
1) 利用 $on(eventName) 监听事件和 $emit(eventName,optionalPayload) 触发事件。
2) 结合定义的空实例，也可允许非父子组件的通信。
c. 父子组件数据组合--利用插槽slot
1) 子组件中设置
，父组件可分发内容到默认slot或指定slot="slotName"。 2) 父组件中设置slot-scope="props"，可获取子组件slot标签的属性。
3) 需注意父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
3. 其他
a. 通过 v-bind:is = "componentObject"，可动态切换组件。若要缓存切出去的组件，则为其添加父元素
。 b. 在子组件中设置 ref="xx" ,可由 child = vm.$refs.xx 操作子组件。 -- 只是一种紧急手段。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
立即学习“前端免费学习笔记（深入）”；
