父子组件的传值关系。刚开始开发页面时，我总是避开，很少写组件，原因是我总是理不清父子组件之间的传值关系，但渐渐地我发现我写的代码是非常冗余的，复用性也很差。因此，我慢慢地开始以组件的形式写，页面也整洁了很多。
在某些大的功能中，功能不仅多，逻辑也很复杂，页面也是一个套一个的，弹窗里包含弹窗都是三个以上，因此如果这个页面不采用多个组件来写的话，是很糟糕的。所以在这个模块里很多功能都使用了组件间的传值。一种是不可以跨级的传值方式：有时候三级页面需要用到一级页面的值，但二级页面没有使用到，这种情况是不能跨级传值的，只能一级传向二级，再由二级把一级的值传给三级页面。同理，子组件给父组件传值也是一样的。一种可以跨级的传值方式：最原始的父组件可以直接传值给最后一级的子组件(-this.$parent)，最后一级的子组件也可以传值给最原始的父组件(this.$children)。
步骤：
（1） 创建子组件（子组件的文件名自定义）。
（2） 在父组件中引入子组件的路径（import test from "路径"）。
（3） 在components：{test}。【test：注册子组件的名字】
（4）在父组件合适的地方使用子组件。
传值：
（1）父组件传值给子组件：
a: this.$nextTick(() => { this.$refs.xxx.onInit(yy);}); 【xxx:ref对应的值； onInit()：子组件接收的方法，yy:参数】
(子组件接收：onInit(cc) 【cc:参数】 )
b: <test :data="test"></test> 【data即父组件传给子组件的值】；
（子组件接收用props。【props['data']】）
（2）子组件传值给父组件：使用this.$nextTick(() => { this.$emit("testcolse", { data:xx, });}); 【testcolse:自己起的名称, data:xx:传的参数 】
（父组件接收：onClose (v) 【v子组件传的参数】）
标签：父子,test,组件,data,跨级,传值,页面 来源： https://www.cnblogs.com/z996/p/16617448.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。