一、vue的组件化应用

　　首先，知道有哪些相关的属性需要用到，再慢慢去理解，运用。

　　1.两个vue页面　　2. slot占位符（可用可不用）　　3.props内置属性　　4.watch监听函数　　5.import导入vue的功能　　6.data的return里需要返回值需要放进去，如 data: ' ' 就行了

　　第一步，写好两个vue页面，我这里写的是dialog（对话框）的弹框运用

(1)子组件(dialog)基本代码如下

[url=][/url]
<template>  <el-dialog title="编辑规格" :visible.sync="sizeedit" @close="closingedit" width="30%">

　　<el-form :model="form" ref="form" label-width="80px" :rules="rules">  　　　　<el-form-item label="规格名称" prop="name">
    　　　　<el-input v-model="form.name" autocomplete="off"></el-input>
  　　　　</el-form-item>
　　　　</el-form> 　　<div slot="footer" class="dialog-footer">　　　　　　<el-button type="warning" size="small" @click="reset('form')">重置</el-button>
　　　　　　<el-button type="danger" size="small" @click="close">取消</el-button>
　　　　　　<el-button type="primary" size="small" @click="save('form')">保存</el-button>
　　　</div>
　</el-dialog>
</template>[url=][/url]

data里

form: {}

sizeedit: false,

methods里

[url=][/url]
　　close () {      this.$emit('close-sizeedit', true)    },    reset () {      this.$refs.form.resetFields()    },    closingedit () {      this.$emit('close-sizeedit', true)    },[url=][/url]

(2)父组件中

需要传递的值为id,通过函数传递id

handleEdit (id) {      console.log(id)      this.editId = id      this.sizeeditVisible = true      console.log(this.sizeeditVisible)    },

所以交流的值是editId

(3)两个页面基本完成的情况下，第一步，导入子组件，并且绑定传递的参数

import sizeedit from './sizeedit'
components: {    sizeedit  }
<sizeedit :sizeedit-visible="sizeeditVisible" @close-sizeedit="sizeeditVisible = false" :edit-id="editId"/>

父组件，data里

editId: ''，sizeeditVisible: false,

子组件，要开始添加内置属性props和watch监听参数的变化，然后执行函数

[url=][/url]
props: {    'sizeeditVisible': Boolean,    'editId': String  }watch: {    sizeeditVisible () {      this.sizeedit = this.sizeeditVisible      this.showEdit()    }  }
[url=][/url]

methods里

[url=][/url]
showEdit () {      console.log(this.editId)      let formData = new FormData()      formData.append('id', this.editId)      let config = {headers: {'Content-Type': 'multipart/form-data'}}      this.$http.post('/psi/base/edit', formData, config).then(res => {        console.log(this.form)        this.form.name = res.data.data.name      })    }[url=][/url]

那么，基本只要父组件的id是确实在变化而且不是undefined【一般都是输入框变化的值】（判断方法，在相应函数下，console.log（id）），那么form里的规格名称就会改变。

组件套用，参数（String,Boolean）传递基本完成。

二、小问题总结

需要注意的几个小问题

1.关于form的-1 this.$refs.form.resetFields()  是清空form数据的函数，但是前提，你的form属性不能少,form-item里props一定要有-2 一定要有v-model属性，如文中的v-model = "form.name"-3 在data里的数据，form需要帮name占位，这样子，你传递的值才会放进来form: { name: '' }            
2.关于子父组件的-1 绑定数据时，一定要注意，父组件里需要定义editId，在data设置为空就行（注意在父组件用console.log检测是否id有值）-2 子组件里，要有props和watch，用来监听你的值发生变化，从而相应做出动作-3 在父组件引用子组件时，要记得用import导入，而且在components组件里，导入那个标签，从而才能在父组件的vue页面里放子组件的大标签-4 注意传递的数据，在引用子组件标签时，绑定editId3.关于敲代码找错的-1 遇到问题，看控制台，点击右键，检查，然后在console里看是什么错-2 如果console里没有报红，而又确实没有数据，那你就要考虑是函数功能并没有被调用，还是你没有把数据放进去，导致调用了也是空值-3 学会找到出错的地方，比如你想实现那个功能，但是点击发现并没有发生函数功能，那么你就需要检查函数，以及相关的绑定值，多打打console.log，看是否都有值。暂时这篇文章涉及到的就是String和Boolean类型的传值，晚点看下下次有没有空，再添加一下form的传递，就是Object，会比较蛋疼，但是和这里的写法是不一样的。
【转载，仅作分享，侵删】
原文地址：https://www.cnblogs.com/qq946487 ... 03/15/10535700.html

奈斯，感谢分享