父组件
<template>
<div>
msg是父组件传给子组件的 ddddddd 是子组件通过$emit 传过来的第一个参数
<my-button msg="你好" @ddddddd="d"></my-button>
</div>
</template>
<script>
import anniu from "@/components/Button.vue"
export default {
components: {
"my-button" : anniu
},
data() {
return {
};
},
mounted() {
},
methods: {
// n 是用来接收子组件通过$emit 传过来的第二个参数
d(n){
alert(n)
}
},
};
</script>
<style scoped>
</style>
<template>
<div>
msg是父组件传过来的属性值,显示的是msg的key值
<button @click="add"> {{msg}} </button>
</div>
</template>
<script>
export default {
// props 用来接收 父组件 传过来的 msg 属性
// 下面设置 msg 设置他的属性类型之类的,默认值及其他数据 具体可看props API
props: {
msg:{
type : String,
default:"按钮",// 当父组件没有设置这个msg 属性的时候会默认出现 按钮
required:true, // 必填项,父组件必须设置这个msg 值否则会报错
}
},
data() {
return {
};
},
mounted() {
},
// 子组件是通过$emit 属性 将下面第一个参数传到 父组件上面的属性,第二个参数是传给父组件的触发属性后的参数
methods: {
add(){
this.$emit('ddddddd', 123);
}
},
};
</script>
<style scoped>
</style>
小结
props 和$emit 都是写在子组件里的