Commitfc2e779

committed

父子组件弹窗封装

1 parent1d705cc commitfc2e779Copy full SHA for fc2e779

File tree

+105

-0

lines changed

+105

-0

lines changed

Lines changed: 7 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ import radio from '@/views/elementui/el-radio'`
`5`	`5`	`importcheckboxfrom'@/views/elementui/el-checkbox'`
`6`	`6`	`importtablefrom'@/views/elementui/el-table'`
`7`	`7`	`importdebouncefrom'@/views/js/debounce'`
	`8`	`+importfatherfrom'@/views/index'`
`8`	`9`
`9`	`10`	`Vue.use(Router)`
`10`	`11`
`@@ -15,6 +16,12 @@ export default new Router({`
`15`	`16`	`name:'HelloWorld',`
`16`	`17`	`component:HelloWorld,`
`17`	`18`	`},`
	`19`	`+`
	`20`	`+{`
	`21`	`+path:'/father',`
	`22`	`+name:'father',`
	`23`	`+component:father,`
	`24`	`+},`
`18`	`25`	`{`
`19`	`26`	`path:'/radio',`
`20`	`27`	`name:'radio',`

Lines changed: 45 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,45 @@`
	`1`	`+<template>`
	`2`	`+ <div>`
	`3`	`+ <templateDialog`
	`4`	`+:dialog-visible="dialogVisible"`
	`5`	`+:data="data"`
	`6`	`+@close-dialog="closeDialog"`
	`7`	`+@handle-cancel="handleCancel"`
	`8`	`+@handle-confirm="handleConfirm"`
	`9`	`+ ></templateDialog>`
	`10`	`+ <div>{{childData}}</div>`
	`11`	`+ <el-buttontype="primary"@click="dialogVisible = true">`
	`12`	`+ <iclass="el-icon-plus el-icon--left" />`
	`13`	`+ 打开弹窗`
	`14`	`+ </el-button>`
	`15`	`+ </div>`
	`16`	`+</template>`
	`17`	`+`
	`18`	`+<script>`
	`19`	`+importtemplateDialogfrom'./templateDialog.vue'`
	`20`	`+exportdefault {`
	`21`	`+ components: {`
	`22`	`+ templateDialog,`
	`23`	`+ },`
	`24`	`+data() {`
	`25`	`+return {`
	`26`	`+ dialogVisible:false,`
	`27`	`+ data:'父组件过来的值',`
	`28`	`+ childData:'',`
	`29`	`+ }`
	`30`	`+ },`
	`31`	`+ methods: {`
	`32`	`+closeDialog() {`
	`33`	`+this.dialogVisible=false`
	`34`	`+ },`
	`35`	`+handleCancel() {`
	`36`	`+this.dialogVisible=false`
	`37`	`+ },`
	`38`	`+handleConfirm(val) {`
	`39`	`+console.log('子组件传过来的值：', val)`
	`40`	`+this.childData= val`
	`41`	`+this.dialogVisible=false`
	`42`	`+ },`
	`43`	`+ },`
	`44`	`+}`
	`45`	`+</script>`

Lines changed: 53 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,53 @@`
	`1`	`+<template>`
	`2`	`+ <div>`
	`3`	`+ <el-dialog`
	`4`	`+width="60%"`
	`5`	`+title="模板名称"`
	`6`	`+:visible.sync="dialogVisible"`
	`7`	`+:before-close="handleClose"`
	`8`	`+ >`
	`9`	`+ <div>{{data}}</div>`
	`10`	`+ <spanslot="footer"class="dialog-footer">`
	`11`	`+ <el-buttonsize="mini"@click="handleCancel">取消</el-button>`
	`12`	`+ <el-buttontype="primary"size="mini"@click="handleConfirm">确定</el-button>`
	`13`	`+ </span>`
	`14`	`+ </el-dialog>`
	`15`	`+ </div>`
	`16`	`+</template>`
	`17`	`+`
	`18`	`+<script>`
	`19`	`+exportdefault {`
	`20`	`+ name:'templateDialog',`
	`21`	`+ props: {`
	`22`	`+ dialogVisible: {`
	`23`	`+ type:Boolean,`
	`24`	`+ default:false,`
	`25`	`+ },`
	`26`	`+ data: {`
	`27`	`+ type:String,`
	`28`	`+ default:'',`
	`29`	`+ },`
	`30`	`+ },`
	`31`	`+data() {`
	`32`	`+return {}`
	`33`	`+ },`
	`34`	`+created() {`
	`35`	`+console.log('asaskj')`
	`36`	`+ },`
	`37`	`+ methods: {`
	`38`	`+handleClose() {`
	`39`	`+this.$emit('close-dialog')`
	`40`	`+ },`
	`41`	`+handleCancel() {`
	`42`	`+this.$emit('handle-cancel')`
	`43`	`+ },`
	`44`	`+handleConfirm() {`
	`45`	`+let val='我是子组件'`
	`46`	`+this.$emit('handle-confirm', val)`
	`47`	`+ },`
	`48`	`+ },`
	`49`	`+}`
	`50`	`+</script>`
	`51`	`+`
	`52`	`+<style scoped>`
	`53`	`+</style>`

Comments

(0)