vue组件通信：父与子、子与父

程序员文章站 2022-09-06 07:52:23

父子通信1.vue中提供了很棒的组件化思想，组件提高了代码的复用性。1....

父与子、子与父通信

1. 组件通信
2. 父组件与子组件通信
- 2.1 父与子通信
- 2.2代码实现父与子及详细说明
3. 子组件与父组件通信
- 3.1 子与父通信
- 3.2 代码实现子与父及详细说明

1. 组件通信

1.1 组件嵌套

vue中提供了很棒的组件化思想，组件提高了代码的复用性。
组件中可以引入其他的组件

1.2 组件嵌套步骤

创建父、子组件
在父组件引入子组件

1.3 父与子、子与父通信

vue.js中，父子组件的关系可以总结为props down ，events up
父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息（后面结合代码会细说）
父子通信数据传递的示意图：

1.4 实现案例图示

vue组件通信：父与子、子与父
以下内容都是通过该案例展开的。我们希望实现：

在文本框输入内容后点击 + 时，下面事项列表能够更新；
点击每个事项后的 ×，该事项能够删除。

2. 父组件与子组件通信

2.1 父与子通信

子组件要使用父组件的数据，我们需要通过子组件的props选项。如何理解props选项呢？
打个比喻：小孩拿着一个大布袋子问大人要糖吃，大人把糖放进了大布袋子中
props选项就是这个“大布袋子”，父组件把数据放在子组件的props选项中，子组件内部也就有了该数据，这就是上面所说的——props down
当然，子组件要使用父组件的数据，不仅仅需要通过子组件的props选项。
在父组件的模板中，要动态的绑定父组件的数据到子组件的props，与绑定到任何普通的html特性相类似，就是用v-bind，简写就是冒号( : )。这样每当父组件的数据变化时，该变化也会传导给子组件。

2.2代码实现父与子及详细说明

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>父子通信</title>
  <script src="../js/vue.js"></script>
  <script>
    var todoAdd={
      props:["add_tasks"],
      data(){
        return{task:""}
      },
      template:`
      <div>
        <input type="text" v-model="task"><button @click="add">+</button>
      </div>`,
      methods:{
        add(){
          this.add_tasks.push(this.task);
          this.task="";
        }
      }
    }
    var todoItem={
      props:["t","i","item_tasks"],
      template:`
      <li>
        {{i+1}}-{{t}}<a href="javascript:;" @click="del">×</a>
      </li>`,
      methods:{
        del(){this.item_tasks.splice(this.i,1);}
      }
    };
    var todoList={
      props:["list_tasks"],
      template:`
      <ul>
        <todo-item v-for="(t,i) of list_tasks" :t="t" :i="i" :item_tasks="list_tasks"></todo-item>
      </ul>`,
      components:{todoItem}
    };    
    Vue.component("to-do",{
      data(){
        return{tasks:["吃饭","睡觉","打豆豆"]}
      },
      template:`
      <div>
        <h1>待办事项列表</h1>
        <todo-add :add_tasks="tasks"></todo-add>
        <todo-list :list_tasks="tasks"><todo-list>
      </div>`,    
      components:{todoAdd,todoList}
    })
  </script>
</head>
<body>
  <div id="app">
    <to-do></to-do>
  </div>
  <script>
    new Vue({
      el:"#app"
    })
  </script>
</body>
</html>

为了便于理解，用图的方式解释一下上面代码：
vue组件通信：父与子、子与父

按照上图红色标记序号详细讲一下：

为了方便理解，我们称todo为爷爷组件，todoList为父亲组件，todoItem为儿子组件

爷爷组件todo中的模板代码(template)中——:list_tasks=“tasks”，引号中的tasks就是爷爷组件的数据tasks，等号左边的list_tasks就是给到父亲组件todoList中数据的名称。用上边的比喻来解释就是，大人把这些糖叫做奶糖，小孩把这些糖叫做大白兔奶糖，虽然叫法不一样，但指的是一个东西！(也可以叫一样的名字，即 :tasks=“tasks”，但需要知道等号两边的tasks意义不同)
父亲组件todoList中——props:[“list_tasks”]，这时父亲组件内部有了list_tasks这个变量。我们需要注意的是：在爷爷组件todo中tasks是一个数组，数组是引用类型，所以tasks变量中存的是一个地址，我们假设这个地址是0x1234，那么我们在父亲组件todoList中拿到的list_tasks也存着一个地址，而且这个地址也是0x1234。这也就表示，我们从爷爷组件中拿到的数据不是副本，tasks和list_tasks指向同一个地址
父亲组件todoList的模板代码中使用了list_tasks变量
儿子组件todoItem也需要使用爷爷的tasks，但是他不能问爷爷要啊，他就问他爹要啦，他爹也有啊，但名字叫做list_tasks,儿子把要过来的数据又重新起名叫做item_tasks,就可以通过v-for指令在页面生成我们想要得到的事务列表
儿子组件todoItem通过props拿到数据item_tasks，item_tasks同样指向地址0x1234
触发事件后，儿子组件todoItem调用自己的方法del，对item_tasks中的数据进行了删除。因为tasks、list_tasks和item_tasks都指向一个地址，触发事件影响的也就是爷爷组件todo中的数据。

子组件todoAdd的道理也是如此，就不重复说啦~

这里再说一下绿色标记处的代码：

儿子组件todoItem要使用父亲组件todoList的 t 和 i 变量，父亲组件中用代码——:t=“t” :i=“i” 动态的将数据绑定到儿子组件的props中，等号两边的 t 和 i 意义不同，同上面所说。

3. 子组件与父组件通信

学习了以上内容，子组件中内部的方法可以通过以上方式使用到父组件中的数据。但是上面栗子中add()方法、del()方法散落在各个子组件内部，如果有更多的子组件和方法，我们后期是难以维护的。所以，如果我们将所有的方法都放在父组件中，子组件需要使用的话则通过一定方式触发父组件内的方法。这就是子组件与父组件通信。

3.1 子与父通信

父组件是使用props传递数据传递给子组件，但如果子组件要把数据传递回去，应该怎么做？那就是自定义事件！
- 使用$on(事件名称)监听事件
- 使用$emit(事件名称)触发时间
注意，不能用$on侦听子组件抛出的事件，而必须在模板里直接使用v-on绑定(v-on简写@)
父组件内：给子组件绑定一个事件

<child @事件名称="方法名称(参数)"></child>

子组件内：在子组件内出发父组件指定的事件

this.$emit("事件名称")

3.2 代码实现子与父及详细说明

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子父通信</title>
  <script src="../js/vue.js"></script>
</head>
<script>
  var todoAdd={
    template:`
    <div>
      <input type="text" v-model="task"><button @click="add">+</button>
    </div>`,
    data(){
      return{task:""}
    },
    methods:{
      add(){
        this.$emit("add",this.task);
        this.task="";
      }
    }
  }
  var todoItem={
    props:["t","i"],
    template:`
    <li>
      {{i+1}}-{{t}}<a href="javascript:;" @click="del">×</a>
    </li>`,
    methods:{
      del(){this.$emit("del");}
    } 
  };
  var todoList={
    props:["tasks"],
    template:`
      <ul>
        <todo-item @del="del(i)" v-for="(t,i) of tasks" :t="t"  :i="i"></todo-item>
      </ul>`,
    methods:{
      del(i){this.$emit("del",i);}
    },
    components:{
      todoItem
    }   
  };  
  Vue.component("to-do",{
    template:`
    <div>
      <h1>待办事项列表</h1>
      <todo-add @add="add"></todo-add>
      <todo-list @del="del" :tasks="tasks"><todo-list>
    </div>`, 
    data(){
      return{
        tasks:["吃饭","睡觉","打豆豆"]
      }
    },  
    methods:{
      add(task){
        this.tasks.push(task);
      },
      del(i){
        this.tasks.splice(i,1);
      }
    }, 
    components:{
      todoAdd,
      todoList
    }
  })
</script>
<body>
  <div id="app">
    <to-do></to-do>
  </div>
  <script>
    new Vue({
      el:"#app"
    })
  </script>
</body>
</html>

同样先用图解释一下上述代码：
vue组件通信：父与子、子与父
先看红色标记：

当点击button按钮时，子组件todoAdd触发自己的方法add()
子组件todoAdd可以使用$emit触发父组件todo的自定义事件，自定义事件名称为add，this.task是参数
父组件todo的模板代码(template)中定义了自定义事件(@add=“add”),等号左边是事件名，右边引号中是所触发的父组件中的方法名
父组件todo中的add方法被执行，页面上添加了新的事物

再看蓝色标记：
为了方便理解，我们称todo为爷爷组件，todoList为父亲组件，todoItem为儿子组件

当点击×时，儿子组件todoItem触发了自己的方法del()
儿子组件todoItem使用$emit触发父亲组件todoList的自定义事件，自定义事件名称为del
父亲组件todoList的模板代码(template)中定义了自定义事件(@del=“del(i)”),等号左边是事件名，右边引号中是所触发的父亲组件todoList中的方法名。
父亲组件todoList中的方法del(i)中有一个参数i，i为当前要删除的tasks数组中元素的下标(tasks数组在爷爷组件的data属性中),该方法同样使用$emit触发了爷爷组件todo的自定义事件，自定义事件名称为del，i为参数(注意：不是this.i)
爷爷组件todo的模板代码(template)中定义了自定义事件(@del=“del”),等号左边是事件名，右边引号中是所触发的爷爷组件中的方法名
爷爷组件todo中的del方法被执行，选中的事务将被删除

本文地址：https://blog.csdn.net/weixin_44410783/article/details/113960268

上一篇：古代的书生考中状元后待遇如何？各个朝代是什么样的？

下一篇：为什么古代的大臣被皇帝赐死之前，都要对皇帝感恩戴德？

vue组件通信：父与子、子与父

父与子、子与父通信

1. 组件通信

1.1 组件嵌套

1.2 组件嵌套步骤

1.3 父与子、子与父通信

1.4 实现案例图示

2. 父组件与子组件通信

2.1 父与子通信

2.2代码实现父与子及详细说明

3. 子组件与父组件通信

3.1 子与父通信

3.2 代码实现子与父及详细说明

深度剖析Vue中父给子、子给父、兄弟之间传值！

父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法

图文介绍Vue父组件向子组件传值

Vue.js子组件向父组件通信的方法实例代码详解

JQuery操作iframe父页面与子页面的元素与方法(实例讲解)

vue父组件点击触发子组件事件的实例讲解

jquery、js调用iframe父窗口与子窗口元素的方法教程

详解vue2父组件传递props异步数据到子组件的问题

Vue中父组件向子组件通信的方法

详解vue2.0组件通信各种情况总结与实例分析