父子组件的传值

         父子组件的传值关系。刚开始开发页面时，我总是避开，很少写组件，原因是我总是理不清父子组件之间的传值关系，但渐渐地我发现我写的代码是非常冗余的，复用性也很差。因此，我慢慢地开始以组件的形式写，页面也整洁了很多。

在某些大的功能中，功能不仅多，逻辑也很复杂，页面也是一个套一个的，弹窗里包含弹窗都是三个以上，因此如果这个页面不采用多个组件来写的话，是很糟糕的。所以在这个模块里很多功能都使用了组件间的传值。一种是不可以跨级的传值方式：有时候三级页面需要用到一级页面的值，但二级页面没有使用到，这种情况是不能跨级传值的，只能一级传向二级，再由二级把一级的值传给三级页面。同理，子组件给父组件传值也是一样的。一种可以跨级的传值方式：最原始的父组件可以直接传值给最后一级的子组件(-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