一. 父子组件
1、在一个组件内部定义另一个组件，称为父子组件；
<div id="itany">
<my-hello></my-hello>
</div>
<template id="hello">
<div>
<h3>我是hello父组件</h3>
<hr>
<my-world></my-world>
</div>
</template>
<template id="world">
<div>
<h4>我是world子组件</h4>
</div>
</template>
<script>
var vm = new Vue({ //根组件
el: '#itany',
components: {
'my-hello': { //父组件
data() {
return {
msg: '网博',
name: 'tom',
age: 23,
user: {
id: 9527,
username: '唐伯虎'
},
}
},
template: '#hello',
components: {
'my-world': { //子组件
template: '#world',
}
}
}
}
});
</script>
2、子组件只能在父组件内部使用 => 如上<my-world></my-world>在id为hello的组件中；
3、默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的。
2. 组件间数据传递 （通信）
2.1 子组件访问父组件的数据
a)在调用子组件时，绑定想要获取的父组件中的数据
b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据
<div id="itany">
<my-hello></my-hello>
</div>
<template id="hello">
<div>
<h3>我是hello父组件</h3>
<h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>
<hr>
<my-world :message="msg" :name="name" :age="age"></my-world>
</div>
</template>
<template id="world">
<div>
<h4>我是world子组件</h4>
<h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
</div>
</template>
<script>
var vm = new Vue({ //根组件
el: '#itany',
components: {
'my-hello': { //父组件
data() {
return {
msg: '网博',
name: 'tom',
age: 23,
user: {
id: 9527,
username: '唐伯虎'
},
}
},
template: '#hello',
components: {
'my-world': { //子组件
template: '#world',
props: ['message', 'name', 'age', 'user'] //简单的字符串数组
// props:['message','name','age','user'] //简单的字符串数组
props: { //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
message: String,
name: {
type: String,
required: true
},
age: {
type: Number,
default: 18,
validator: function(value) {
return value >= 0;
}
},
user: {
type: Object,
default: function() { //对象或数组的默认值必须使用函数的形式来返回
return {
id: 3306,
username: '秋香'
};
}
}
},
},
}
}
}
});
</script>
总结：父组件通过props向下传递数据给子组件
注：组件中的数据共有三种形式：data、props、computed
2.2 父组件访问子组件的数据
a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义
b)父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据
<div id="itany">
<my-hello></my-hello>
</div>
<template id="hello">
<div>
<h3>我是hello父组件</h3>
<h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>
<h3>访问子组件的数据：{{sex}},{{height}}</h3>
<hr>
<my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
</div>
</template>
<template id="world">
<div>
<h4>我是world子组件</h4>
<h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
<h4>访问自己的数据：{{sex}},{{height}}</h4>
<button @click="send">将子组件的数据向上传递给父组件</button>
</div>
</template>
<script>
var vm = new Vue({ //根组件
el: '#itany',
components: {
'my-hello': { //父组件
methods: {
getData(sex, height) {
this.sex = sex;
this.height = height;
}
},
data() {
return {
msg: '网博',
name: 'tom',
age: 23,
user: {
id: 9527,
username: '唐伯虎'
},
sex: '',
height: ''
}
},
template: '#hello',
components: {
'my-world': { //子组件
data() {
return {
sex: 'male',
height: 180.5
}
},
template: '#world',
props: ['message', 'name', 'age', 'user'] //简单的字符串数组
// props:['message','name','age','user'] //简单的字符串数组
props: { //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
message: String,
name: {
type: String,
required: true
},
age: {
type: Number,
default: 18,
validator: function(value) {
return value >= 0;
}
},
user: {
type: Object,
default: function() { //对象或数组的默认值必须使用函数的形式来返回
return {
id: 3306,
username: '秋香'
};
}
}
},
methods: {
send() {
// console.log(this); //此处的this表示当前子组件实例
this.$emit('e-world', this.sex, this.height); //使用$emit()触发一个事件，发送数据
}
}
},
}
}
}
});
</script>
总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件
网友评论