首先我们在
components/toast/index.vue
来创建一个组件
<template>
<div>
<div @click="back">{{message}}</div>
</div>
</template>
<script>
export default {
//接收父组件参数
props:[message],
data(){
return { }
},
methods: {
back(){
//向父组件传参
this.$emit('backFun',1)
}
}
}
</script>
全局组件
在main.js 中注册全局组件
//引入组件
import hellowordCom from './components/HelloWorld.vue'
//注册全局组件
Vue.component('hellowordCom',hellowordCom)
局部组件
//引入组件
import hellowordCom from './components/HelloWorld.vue'
export default {
component:{
hellowordCom:hellowordCom
},
data(){
return:{
data:'父组件的参数'
}
},
methods:{
//接收子组件的传参
backFun(e){
console.log(e)
}
}
}
使用
//message向子组件传参 backFun接收子组件的参数 需要和子组件的命名保持一致
<hellowordCom :message="data" @backFun='backFun'/>