vue.js入门(18)组件嵌套

时间:2023-01-30 21:08:13

养成一个习惯,components下的组件,首字母都大写,组件名是什么,class名,name名就是什么

这个时候写好User.vue文件

<template>
  <div class="user">
  	<ul>
  		<li v-for:"user in user">{{ user }}</li>
  	</ul>
  </div>
</template>

<script>
export default {
  name: 'user'
  data () {
    return {
     users:["day1","day2","day3"],
    }
  }
}
</script>

<style scoped>

</style>

但是这个时候页面是一片空白,因为App.vue文件并没有和User.vue文件关联上,关联上有两种方式

1.全局注册组件

在main.js里面加两句话

import User from './components/User'
Vue.component("user",User);

这样,任何一个文件都可以调用User这个组件了,只要调用user,就相当于调用User这个组件

然后回到App.vue文件,在第一部分template模板那里当成标签展示

<user></user>

这样就可以显示出来了,但是一般来说,基本上所有项目都不会采用全局注册这个方法,因为会导致所有都可以访问,一般采用的是第二种方法,局部注册组件


2.局部注册组件

把刚刚main.js加的两句话删掉,然后因为是想在App.vue中调用,所以直接在这个文件内引入就好

在行为逻辑第二个版块script版块中首先先引入

import User from './components/User'

然后,为了可以调用,在vue中注册组件

export default {
  name: 'App',
  components:{
  "user":User}
  }
这里有两种写法,可以写
"user":User
也可以直接写
User