一、组件的基本使用
使用组件（等于html引入html）
跟组件（父组件）
<template>
<div>
<h3>父组件</h3>
<hr />
<!-- 使用组件 -->
<helloWorld />
</div>
</template>
<script>
//引入组件
import HelloWorld from './components/HelloWorld';
export default {
//定义组件
components: {
helloWorld: HelloWorld,
}
}
</script>
<style>
</style>
子组件
<template>
<div class="hello">
<h3>子组件</h3>
</div>
</template>
<script>
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果展示
二、父向子传递参数（props）
父组件
key 为自定义内容
子组件
<template>
<div class="hello">
<h3>子组件 -- 父组件传递值 : {{msg}}</h3>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
// 接收值父组件传递值
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果展示
三、子组件向父组件，传递参数（函数传递调用）
1、父组件
定义方法
<template>
<div>
<h3>父组件</h3>
<hr />
<!-- 使用组件 -->
<helloWorld :fn="show"/> <!-- 常量，key，自定义 -->
</div>
</template>
<script>
//引入组件
import HelloWorld from './components/HelloWorld';
export default {
//定义组件
components: {
helloWorld: HelloWorld,
},
//
methods: {
show(data) {
alert("获取到子组件数据"+data);
}
}
}
</script>
<style>
</style>
2、子组件
<template>
<div class="hello">
<h3>子组件 </h3>
{{ fn("--666")}} <!--传递参数到父组件方式一 -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
// 接收值父组件传递值
props: ['fn'],
//传递参数到父组件方式二
created() {
this.fn("--66666")
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
3、效果展示
4、子组件的值在父页面展示
四、EventBus -任意层级传递参数（多重父子关系）
父传子，使用props
子传父，使用父传子函数，子调用
多层嵌套这样就很不合理了，使用 EventBus
主要代码
//引入 EventBus
import EventBus from './EventBus';
定义监听事件
//监听事件
EventBus.$on("sendData",function(data){
alert("监听事件,参数="+data);
})
// 当前监听事件定义在created 函数内
created() {
}
调用监听事件
// 触发监听事件函数
EventBus.$emit("sendData", "我是子组件参数")
methods: {
//点击事件
sendMsg() {
}
},
$once 只执行一次
$off(‘id’) 取消事件
1、定义EventBus.js 给所有组件引入
创建文件 EventBus.js
import Vue from 'vue';
var vm = new Vue();
//向外导出 import vm from 'EventBus';
export default vm;
2、页面一
<template>
<div>
<h3>父组件</h3>
<hr />
<!-- 使用组件 -->
<helloWorld />
</div>
</template>
<script type="text/javascript">
//引入 EventBus
import EventBus from './EventBus';
//引入组件
import HelloWorld from './components/HelloWorld';
export default {
//定义组件
components: {
helloWorld: HelloWorld,
},
created() {
EventBus.$on("sendData",function(data){
alert("父组件打印,参数="+data);
})
}
}
</script>
<style>
</style>
3、页面二
<template>
<div class="hello">
<h3>子组件 </h3>
<button @click="sendMsg">点击调用监听函数</button>
</div>
</template>
<script>
// EventBus
import EventBus from '../EventBus';
export default {
methods: {
sendMsg() {
EventBus.$emit("sendData", "我是子组件参数")
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
点击事件调用监听，并传值过去