用法:
父组件
在父组件中引入并使用<son></son>子组件,在子组件标签上定义事件,如msg、fn、如果动态绑定就加:,如果不动态就直接msg = "大哥",
// 父组件
<template>
<div id="father">
<son :msg="msgData" :fn="myFunction"></son>
</div>
</template>
<script>
import son from "./son.vue";
export default {
name: father,
data() {
msgData: "父组件数据";
},
methods: {
myFunction() {
console.log("vue");
}
},
components: {
son
}
};
</script>
子组件:
然后子组件用props进行接收,接收的事件名在上面进行填写即可,(props有三种写法,请看最后)
// 子组件
<template>
<div id="son">
<p>{{msg}}</p>
<button @click="fn">按钮</button>
</div>
</template>
<script>
export default {
name: "son",
props: ["msg", "fn"]
};
</script>
props的三种写法:
第一种方式:
这是最简单的方式。
props:["name","age","gender"]
第二种方式:
相对规范一点。
props:{
name:String,
age:Number,
gender:String
}
第三种方式:
最完整的用法。
props:{
name:{
type:String,
required:true
},
age:{
type:Number,
required: false,
default:99
},
gender: {
type:String
}
}