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



父组件是通过props属性给子组件通信的数据是单向流动 父—>子

子组件不能修改props 否则报错

实现步骤

props 接收传值

• 父组件

• 子组件

• props 有三种接收数据的方式

1. 数组字符型 [‘msg’,‘num’]
2. 对象型 { msg{ type:String,required: true } }

父组件 通过绑定自定义事件，接收子组件传递过来的参数

子组件 通过调用\(emit 来触发父组件上的自定义事,从而实现传参</p></blockquote><p><strong>实现步骤</strong></p><div></div><ul><li>父组件</li></ul><div></div><ul><li>子组件</li></ul><div></div><blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"><p><strong>祖 --&gt; 父孙</strong></p></blockquote><p> <strong>祖组件</strong></p><div></div><p><strong>父组件</strong></p><div></div><p><strong>孙组件</strong></p><div></div><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_670be732be8ec37448.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='vue props type function传参数_vue.js' title="在这里插入图片描述" style="width: 257px; visibility: visible;"></p><p>当我们点击按钮 修改祖组件的数据<br></p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_670be732d90e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='vue props type function传参数_javascript_02' title="在这里插入图片描述" style="width: 276px; visibility: visible;"></p><blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"><p>祖组件修改了,子孙组件没有改变,这是因为在provide中引入数据本身并不是响应式的，所以我们可以使用一些响应式的API来完成这些功能，比如computed函数。而且在调用的时候，因为computed返回的是一个ref对象，我们要取出value属性来使用。</p></blockquote><div></div><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_670be732ec.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='vue props type function传参数_前端_03' title="在这里插入图片描述" style="width: 301px; visibility: visible;"></p><blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"><p>全局事件总线可以用于非父子组件之间的通信，如与兄弟组件/兄弟组件的子组件进行通信。</p><p>先订阅 --&gt; 再发布</p><p><strong>全局传值</strong></p></blockquote><ul><li>安装</li></ul><div></div><ul><li>创建 mitt</li></ul><div></div><ul><li>组件A 传递数据 — 发布</li></ul><div></div><ul><li>组件A 接收数据 — 订阅</li></ul><div></div><blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"><p><strong>全局传值</strong></p><p>全局事件总线可以用于非父子组件之间的通信，如与兄弟组件/兄弟组件的子组件进行通信。</p><p>先订阅 --&gt; 再发布</p><p>（与mitt 类似 – 不需要定义中间件）</p></blockquote><ul><li>安装</li></ul><div></div><ul><li>组件A 传递数据 — 发布</li></ul><div></div><ul><li>组件B 接收数据 — 接收</li></ul><div></div><blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"><p>bus总线程 在vue3中已经废弃了</p><p>类似 mitt 和 pusbub</p><p><strong>全局传值</strong></p></blockquote><ul><li>配置</li></ul><div></div><ul><li>组件A 传递数据 — 发布</li></ul><div></div><ul><li>组件B 接收数据 — 接收</li></ul><div></div><blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"><p>父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.\)emit(“input”,val)自动修改v-model绑定的值

父传子 子改父

• 父组件 传递数据 – 不是响应式

• 子组件 接收数据 子组件可以修改父组件传递值

全局传值

讯享网

子传父 父控制子

• 父组件

利用路由跳转实现跨组件传值

1. 动态传参

2. params 传值

3. query传值

1. Cookie

• 特性

• 传值

2. sessionStorage

• 特性

• 传值

3. localStorage

• 特性

• 传值

祖孙传值

父传子 -&gt; 子级在自己的子组件上设置 v-bind=“\(attr” --&gt; 孙组件 接收父组件没有接收的值</p></blockquote><ul><li>祖组件</li></ul><div></div><ul><li>父组件</li></ul><div></div><ul><li>孙组件</li></ul><div></div><blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;"><p>孙祖传值</p><p>祖组件绑定自定义事件 --&gt; 父组件 绑定自定义事件 v-on=“\)listeners” –&gt; 孙组件通过 \( \)emit 触发祖组件自定义事件实现传值

• 祖组件

• 子组件

• 孙组件

在vue实例原型中 存放数据