1. 父组件使用子组件
父组件将子组件引入
// 引入子组件
import Child from './outDialog';
export default {
name: 'invoice_out',
// components 挂载组件到父组件 就可以使用了
components: { Child },
data() {
return {},
created() {},
2.父子传值
父组件传给子组件的值为字符串时直接修改会报错
所以父组件传给子组件的值不要直接修改 赋值给子组件中的变量之后再进行修改
父组件 在父组件使用的子组件上用 : 变量名
冒号绑定一个变量
<chile
@formVisible="showDialogs"
:stateCode="stateCode"
></chile>
子组件 使用 prop
接收父组件的参数
props: {
变量名 :{
type: 传递的数据类型,
default: 默认值,
}
}
3.子组件触发父组件函数
父组件绑定自定义函数@formVisible="showDialogs"
<chile
@formVisible="showDialogs"
@listOutputInvoices="listOutputInvoices"
></chile>
子组件触发 父组件上绑定的 listOutputInvoices
函数
this.$emit('listOutputInvoices');