Vue.js组件的使用方法-js教程-PHP中文网

这次给大家带来Vue.js组件的使用方法，Vue.js组件使用的注意事项有哪些，下面就是实战案例，一起来看一下。

　　1. 所有Vue组件同时也都是Vue实例，分为全局组件和局部组件，注册方式如下。　　

<p id="app">
    <my-component></my-component>
    <child-component></child-component></p><p id="example">
    <my-component></my-component>
    <!--在#app内局部注册的组件在此无法被渲染 -->
    <child-component></child-component></p><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>Vue.component('my-component', { //全局组件，建议使用短横线分隔式命名组件  template: '<p>A custom component!</p>'})var Child = {
    template: '<p>A child component!</p>'}var app = new Vue({
    el: '#app',    
    components: { //局部组件，仅可在父作用域#app中使用
    'child-component':Child
    }　　
})var example = new Vue({
    el:'#example'})</script>

登录后复制

　　注意：

　　a. 如

字符串模板

表达式

热门教程

更多>