vue2父子组件传值props（vue父子组件传值emit）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

3.4.1.子组件接收信息

父组件显示子组件模板, 通过 props , \(attrs 接值</p> <h5>3.4.1.1.子组件</h5> <p>通过 props 属性接到父组件传来值, 在子组件中可以通过 this 来使用这些信息</p> <p>也可以通过 \)attrs 接收没有被 props 声明的值

讯享网

3.4.1.2.父组件

通过 msg 属性向子组件传值

也可以通过 v-bind 一次性传递多组信息

3.4.2.子组件 watch 监听

父组件传递动态信息 , 子组件 watch 监听信息

3.4.2.1.子组件

通过 watch 监听父组件传来 msg 信息, 在回调函数中修改子组件中的信息

讯享网

讯享网

3.4.2.2.父组件

向子组件传 msg 信息, 通过按钮修改msg, 被子组件watch监听

3.4.3.通过 props 传函数

父组件传递函数 , 子组件调用函数回传值

3.4.3.1.子组件

接收父组件传来 getData() 函数, 调用此函数回传信息

讯享网

3.4.3.2.父组件

向子组件传getData , 类型为函数, 子组件调用时触发监听函数 reData() 接收到值

3.4.4.v-model绑定信息

子组件在 props 中使用value 接收信息 v-model的值, 通过 input 接收返回信息

页面 UI 组件最长用的方式

3.4.4.0.v-model的本质

v-model 实现双向绑定的原理 , 是 value 属性及 input 事件

讯享网

3.4.4.1.子组件

通过 value 接收到父组件 v-model 传来的信息

通过 v-model 双向绑定 childMsg, 当在子组件修改这个值时, 会被 watch 监听到

再通过 this.\(emit(‘input’, nv + “返回信息”); 通过 input 返回数据</p> <pre></pre> <h5>3.4.4.2.父组件</h5> <p>在父组件通过 v-model 双向绑定 msg , 子组件通过 input 事件返回子组件返回的信息</p> <pre></pre> <h4>3.4.5.textarea</h4> <h5>3.4.5.1.子组件</h5> <p>将 input 换成 textarea 效果是一样</p> <pre></pre> <h5>3.4.5.2.父组件</h5> <pre></pre> <h4>3.4.6.select</h4> <h5>3.4.6.1.子组件</h5> <p>接收到 value , options</p> <p>下拉框也可以通过 input 事件, 返回信息</p> <pre></pre> <h5>3.4.6.2.父组件</h5> <pre></pre> <h4>3.4.7.radio</h4> <h5>3.4.7.1.子组件</h5> <p>单选框也是通过 input 事件返回信息</p> <pre></pre> <h5>3.4.7.2.父组件</h5> <pre></pre> <h4>3.4.8.checkbox</h4> <h5>3.4.9.1.子组件</h5> <p>用 value 接收到数组</p> <pre></pre> <h5>3.4.8.2.父组件</h5> <p>通过数组类型 selVals: [0,1], 向子组件传值</p> <pre></pre> <h4>3.4.9.model 自定义</h4> <p>通过 model 在子组件中自定义接收值 ,及返回事件</p> <h5>3.4.9.1.子组件</h5> <p>通过 model 来自定义属性</p> <pre></pre> <h5>3.4.9.2.父组件</h5> <p>父组件使用 v-model:xxx 来指定向子组件传递值</p> <pre></pre> <h4>3.4.10. 父子同步</h4> <h5>3.4.10.1.子组件</h5> <p>使用向父组件同步数据</p> <pre></pre> <h5>3.4.10.2.父组件</h5> <p>不再使用 v-model 来监听子组件回传数据, 而是通过来同步子组件返回的数据</p> <pre></pre> <h4>3.4.11.Click事件回传数据</h4> <h5>3.4.11.1.子组件</h5> <p>使用按钮的 click事件来返回数据</p> <pre></pre> <h5>3.4.11.2.父组件</h5> <pre></pre> <h4>3.4.12.computed监听数据</h4> <h5>3.4.12.1.子组件</h5> <p>使用 computed 来返回数据</p> <pre></pre> <h5>3.4.12.2.父组件</h5> <pre></pre> <h4>3.4.13.数据转汉字</h4> <h5>3.4.13.1.子组件</h5> <pre></pre> <h5>3.4.13.2.父组件</h5> <pre></pre> <h4>3.4.14.数值范围</h4> <h5>3.4.14.1.子组件</h5> <pre></pre> <h5>3.4.14.2.父组件</h5> <pre></pre> <h4>3.4.15.\)refs 找子组件

通过 \(refs 找到子组件调用子组件函数</p> <h5>3.4.15.1.子组件</h5> <p>子组件中定义函数接收val 参数</p> <pre></pre> <h5>3.4.15.2.父组件</h5> <p>在父组件中通过 \)refs 找到指定的组件