app怎么嵌套vue页面_Vue入门基础（组件嵌套）

注册全局组件

1.新增Users.vue

1. {{val}}

//js 逻辑部分

export default {

data() {

return {

users:["sunwuk","zhubj","shawujing"]

};

}

}

2,main.js注册全局组件

import Vue from 'vue'

import App from './App.vue'

//注册全局组件

//1 引入组件

import Users from './components/Users.vue'

//2 注册组件

Vue.component("Users",Users);

Vue.config.productionTip = false

//实例一个vue对象 这里的app 对应index里面的id=app的div容器

new Vue({

render: h => h(App),

}).$mount('#app')

3.APP.vue使用组件

export default {

name: 'app',

components: {

}

}

注册局部组件

APP.vue中注册和使用组件

//注册局部组件

//1 引入组件

import Users from './components/Users.vue'

export default {

name: 'app',

components: { //2 注册组件

Users

}

}

页面效果