组件间关系
组件间 互相嵌套 使用 形成大概以下关系
父子
兄弟
祖先后代
组件分类
容器组件(父组件)
UI组件 (子组件)
状态提升(数据):一个容器组件中 可以使用多个 UI组件 应该将UI组件 需要用到的数据都提升到
容器组件中管理(只负责展示数据和收集数据不做逻辑处理,逻辑应该在容器组件中处理)
组件通信
父-->子通信
<body>
<div id="app">
<home></home>
<common-head ></common-head>
</div>
<template id="home">
<div>
Home组件
<common-head :title="msg"></common-head>
</div>
</template>
</body>
<script>
// 头部组件
const CommonHead = {
props:['title'], // properties
template:`
<div>
我是头部组件
<h2 :title="msg"> {{title}} </h2>
</div>
`,
data () {
return {
msg: 'hello'
}
}
}
const Home = {
template: "#home",
components: {
CommonHead
},
data () {
return {
msg: "我是home组件中的data数据"
}
}
}
Vue.component('Home',Home)
Vue.component('common-head',CommonHead)
const vm = new Vue({
el: '#app',
data: {
}
})
</script>
子-->父通信
<body>
<div id="app">
<home></home>
</div>
<template id="Home">
<div>
Home组件
<common-head :title="msg" @tt="receive"></common-head>
{{msg}}
</div>
</template>
</body>
<script>
// 头部组件
const CommonHead = {
props:['title'], // properties
template:`
<div>
我是头部组件
<h2> {{title}} </h2>
<button @click="transfromEvent">点击向父传数据</button>
</div>
`,
data () {
return {
msg: '这是child数据'
}
},
methods: {
transfromEvent () {
alert("发出一个数据"+this.msg);
this.$emit('tt',this.msg)
}
}
}
const Home = {
template: '#Home',
components: {CommonHead},
data () {
return {
msg: '这是parent数据'
}
},
methods: {
receive(msg){
alert('收到一个新数据'+msg);
this.msg = msg;
}
}
}
Vue.component('Home',Home)
Vue.component('common-head',CommonHead)
const vm = new Vue({
el: '#app',
data: {
}
})
下面是代码的运行过程,利用vue中的$emit来将子组件的data数据传输到父组件中
兄弟组件通信
<body>
<div id="app">
<home></home>
</div>
<template id="home">
<div>
<child1></child1>
<hr>
<child2></child2>
</div>
</template>
</body>
<script>
const bus = new Vue;
const Child1 = {
template: `
<div>
子组件1
<br><br>
<button @click="transfromEvent">像兄弟传输数据</button>
</div>
`,
data () {
return {
msg: '这是兄弟1',
}
},
methods: {
transfromEvent () {
bus.$emit("tt",this.msg);
}
}
}
const Child2 = {
template: `
<div>
子组件2
<h2>{{msg}}</h2>
</div>
`,
data () {
return {
msg: '这是兄弟2',
}
},
mounted () {
bus.$on('tt',(msg)=>{
alert('收到了');
console.log(this.msg,msg);
this.msg = msg;
})
}
}
const Home = {
template: "#home",
components: {
Child1,
Child2
},
data () {
return {
msg: "我是home组件中的data数据"
}
}
}
Vue.component('Home',Home)
const vm = new Vue({
el: '#app',
data: {
}
})
</script>
事件中心总线 eventBus 创建一个第三方的实例 const bus = new Vue();
提交数据 bus.$emit('事件')
监听数据 bus.$on('事件')
点击后
ref通信
<body>
<div id="app">
<home></home>
</div>
<template id="Home">
<div>
Home组件
<common-head ref="child"></common-head>
</div>
</template>
<script src="./vue.js"></script>
<script>
// 头部组件
const CommonHead = {
template:`
<div>
我是头部组件
<h2> {{msg}} </h2>
</div>
`,
data () {
return {
msg: '我是子组件数据'
}
},
methods:{
changeMsg () {
this.msg = '改变啦'
}
}
}
const Home = {
template: '#Home',
components: {
CommonHead
},
data () {
return {
msg: '我是home组件中data中的数据'
}
},
mounted() {
console.log(this.$refs.child)
const child = this.$refs.child;
setTimeout(()=>{
child.changeMsg();
},2000)
}
}
Vue.component('Home',Home)
const vm = new Vue({
el: '#app'
})
</script>
父组件中 <child ref="child"></child>
{
mounted(){
this.$refs.child // 子组件的实例 直接使用子组件上的属性和方法
}
}