vue组件嵌套(初学者超简单,一看就懂)
(1)组件的上一层级是vm实例,因此app组件在new VUe里面注册。组件的上一层级是vm实例,因此app组件在new VUe里面使用。(2)和组件的上一层级是组件(2)和组件的上一层级是组件(3)组件的上一层级是(3)组件的上一层级是
·
一.组件的创建模板:
//第一步:创建定义组件
const 定义的组件名=Vue.extend({
template:`
<div>
组件的内容(html标签+插值语法)
</div>
`,
data(){ //必须写为data(){}函数方法格式
组件内容中插值语法的数据
}
})
//第二步:注册组件(分为局部注册和全局注册两种)
全局注册:
Vue.component('组件运用名', 组件定义名)
局部注册(要在new的vue实例中创建):
new Vue({
el:'',
components:{
组件运用名:组件定义名
}
})
//第三步:使用组件(在html里面)例如:
<div id="root">
<!-- 使用组件 -->
<school></school>
<hello></hello>
</div>
二、组件创造实例
<div id="root">
<!-- 使用组件 -->
<school></school>
<hello></hello>
</div>
<script>
//创建组件
const school = Vue.extend({
template: `
<div>
<h1>学校:{{school}} </h1>
<h1>地址:{{address}}</h1>
</div>
`,
data() {
return {
school: '尚硅谷',
address: '北京'
}
}
})
// 创建组件
const hello = Vue.extend({
template: `
<div>
<h2>你好啊{{name}}</h2>
</div>
`,
data() {
return {
name: 'tom'
}
}
})
// 注册全局组件
Vue.component('hello', hello)
//创建vue实例
new Vue({
el: "#root",
//注册组件(局部注册)
components: {
school: school,
hello: hello
}
})
</script>
三、组件嵌套
想要实现如下组件嵌套:
1、首先创建四个组件:
// 创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data() {
return {
name: 'tom',
age: '20'
}
}
})
//创建school组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{{schoolname}}</h2>
<h2>学校地址:{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
schoolname: '河南科技学院',
address: '新乡市'
}
},
//局部注册student
// student在school里面嵌套,所以student组件在school组件里面的template属性里面注册
components: {
student: student
}
})
// 创建hello组件(和school组件平级)
const hello = Vue.extend({
template: `
<div>
<h2>{{msg}}</h2>
</div>
`,
data() {
return {
msg: '想学好vue'
}
}
})
//创建app组件
const app = Vue.extend({
template: `
<div>
<school></school>
<hello></hello>
</div>
`,
components: {
school: school,
hello: hello
}
})
2、注册组件
在注册每个组件时,各个组件注册在该组件上一层级中。
(1)<app>组件的上一层级是vm实例,因此app组件在new VUe里面注册
new Vue({
el: '#root',
//注册组件school(局部)
components: {
app: app
}
})
(2)<school>和<hello>组件的上一层级是组件<app>
(3)<school>组件的上一层级是<school>
3、组件使用:
组件使用时,各个组件写在该组件上一层级的模板中
(1)<app>组件的上一层级是vm实例,因此app组件在new VUe里面使用
(2)<school>和<hello>组件的上一层级是组件<app>
(3)<school>组件的上一层级是<school>
四、该实例源码:
<div id="root">
<app></app>
</div>
<script>
// 创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data() {
return {
name: '陈泽宇',
age: '20'
}
}
})
//创建school组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{{schoolname}}</h2>
<h2>学校地址:{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
schoolname: '河南科技学院',
address: '新乡市'
}
},
//局部注册student
// student在school里面嵌套,所以student组件在school组件里面的template属性里面注册
components: {
student: student
}
})
// 创建hello组件(和school组件平级)
const hello = Vue.extend({
template: `
<div>
<h2>{{msg}}</h2>
</div>
`,
data() {
return {
msg: '想学好vue'
}
}
})
//创建app组件
const app = Vue.extend({
template: `
<div>
<school></school>
<hello></hello>
</div>
`,
components: {
school: school,
hello: hello
}
})
new Vue({
el: '#root',
//注册组件school(局部)
components: {
app: app
// school: school,
// 注册组件hello
// hello: hello
}
})
</script>
五、实现的效果
更多推荐
已为社区贡献1条内容
所有评论(0)