Vue 学习06——Vue父子组件通信、非父子组件通信1

最新推荐文章于 2023-07-21 12:20:18 发布

winner_corl

最新推荐文章于 2023-07-21 12:20:18 发布

阅读量427

点赞数 2

分类专栏： vue 文章标签： Vue父子组件通讯 Vue非父子组件通讯 Vue子组件向父组件传递值

本文链接：https://blog.csdn.net/Sicily_winner/article/details/103931586

版权

本文详细介绍了Vue中组件间的通信，包括父子组件间的数据传递，如通过props从父到子的单向数据流，以及子组件如何通过事件向父组件传递数据。此外，还讲解了非父子组件间通信的实现，利用中间组件进行事件的触发和监听。最后，探讨了Vue中组件动态属性传递和静态属性传递的不同方式。

摘要由CSDN通过智能技术生成

㋀㋊

✎ 父子组件间通信（Communication）

◆ 组件间通信

父组件向子组件传递数据

➬ ① 前言 ② demo

➬ 还有一种形式叫做插槽

◆ 子组件向父组件传递数据

① 前言

② demo

③ 效果图

◆ 非父子组件间通信

① 前言

② demo

③ 效果图

✎ 父子组件间通信升级（x.vue实战）

◆ 首页我们要知道在另外的组件中如何引入

① 标签

② :is

► 数组

父子组件间通信（Communication——x.html）
组件间通信

我们通过组件实现了模块化开发，但是组件之间也需要进行数据的交换，主要分为父子组件间通信和非父子组件间通信。

父组件向子组件传递数据

父组件与子组件之间以单向数据流形式存在，仅能从父组件向子组件传递数据。

前言

要求：注意传递数据的属性是props，它是以数组的形式存在，必须小写，不然有时候会识别不了。

demo

<!DOCTYPE html>
<html>
<head>
    <title></title>
    
</head>
<body>

<div id="app">
     <my-component :innerTitle="componentTitle"></my-component>
</div>

注意自己使用版本
<script src="https://cdn.jsdelivr.net/npm/vue@x.x.x"></script>
<script type="text/javascript">
    var myvue = new Vue({
        el: "#app",
        data: {componentTitle: "这是标题"},
        components: {
            'my-component': {// 组件名，以下是组件结构，之前是单独定义一个对象来写组件，下面也可以直接写
				/* PS:注意传递数据的属性是props，它是以数组的形式存在，必须小写，不然有时候会识别不了 */
                props: ['innertitle'],
                template: "<a href='##' >{
  {innertitle}}</a>",
				// 模板中使用的数据就是props里面的，但是怎么向props传递数据呢？
				// 1.view中写组件、并且传data值，data是父组件哦！ <my-component :innerTitle="componentTitle"></my-component>
			} 
        }
    })
</script>
</body>
</html>

子组件向父组件传递数据
前言

父子组件向子组件间传递数据的过程是单向的数据流，也就意味着使用props传递数据的方式，只能父元素向子元素传递数据，而子元素中不可修改父元素传递的数据。

父组件与子组件之间以单向数据流形式存在&#x

最低0.47元/天解锁文章

winner_corl

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue 学习06——Vue父子组件通信、非父子组件通信1

目录㋀㋊✎父子组件间通信（Communication）◆组件间通信父组件向子组件传递数据➬ ①前言②demo➬还有一种形式叫做插槽◆子组件向父组件传递数据①前言②demo③效果图◆非父子组件间通信①前言②demo③效果图✎父子组件间通信升级（x.vue实战）◆首页我们要知道在另外的组件中如何引...
复制链接

扫一扫