Vue多层组件之间的通信

最新推荐文章于 2024-07-27 10:29:40 发布

nZk丶

最新推荐文章于 2024-07-27 10:29:40 发布

阅读量931

点赞数

分类专栏： JavaScript&Vue 文章标签： Vue JavaScript Vue组件通信 Web 前端

本文链接：https://blog.csdn.net/weixin_43729854/article/details/103147707

版权

与组件之间通信不同的是，Vue多层组件之间的通信需要动态绑定，当然子组件和父组件之间用props来通讯，这一点是不变的。

下面来给一个例子，不难理解，大家看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多层组件间的通信</title>
</head>
<body>
<!--注意！多层组件通信需要动态绑定-->
<div id="app">
    <my-parent :imgtitle="title" :imgsrc="img"></my-parent>
</div>


<!--子组件1-->
<template id="my_img">
    <!--注意要动态绑定-->
    <img :src="imgsrc" width="300">
</template>


<!--子组件2-->
<template id="my_title">
    <h2>{
  {title}}</h2>
</template>


<!--父组件-->
<template id="my_parent">
    <div>
        <child1 :imgsrc="imgsrc"></child1>
        <chi