父子组件通信

已于 2022-02-11 14:48:56 修改
阅读量338 收藏
点赞数
分类专栏： VUE 文章标签： vue.js react.js 前端
于 2022-02-10 17:13:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/122861484
版权

父子组件通信

在这里插入图片描述

1、父组件向子组件通信

在这里插入图片描述

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
  </div>

<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
    <p>{{cmessage}}</p>
  </div>
</template>
  <script src="../js/vue.js"></script>
  <script>
    // 子组件
    const cpn = {
      template: '#cpn',
      props: ['cmovies','cmessage'],
      data(){
        return {}
      },
      methods:{
      }
    }
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好',
        movies: ['111','232','33323']
      },
      components: {
        cpn
        // 以上写法为对象的增强写法，等同于
        // 'cpn':cpn
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

2、props的基本用法

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
    <cpn :cmessage="message"></cpn>
  </div>

  
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
    <p>{{cmessage}}</p>
  </div>
</template>
  <script src="../js/vue.js"></script>
  <script>
    // 子组件
    const cpn = {
      template: '#cpn',
      // props: ['cmovies','cmessage'],
      // props的其他用法
      props:{
        // 1、类型限制
        // cmovies: Array,
        // cmessages: String
        // 2、赋予初始值,以及必传值
        cmessage:{
          type: String,
          dafault: 'aaaaa',
          required: true  //必须要传该属性
        },
        // 类型是对象或者数组时，默认值必须是一个函数
        cmovies:{
          type:Array,
          default(){
            return []
          }
        }
      }, 
      data(){
        return {}
      },
      methods:{
      }
    }
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好',
        movies: ['111','232','33323']
      },
      components: {
        cpn
        // 以上写法为对象的增强写法，等同于
        // 'cpn':cpn
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

3、props数据验证

在这里插入图片描述

4、props驼峰标识

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn :c-Info="info" :child-my-message="message"></cpn>
  </div>

  <template id="cpn">
    <div>
      <p>{{cInfo}}</p>
      <p>{{childMyMessage}}</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const cpn = {
      template: '#cpn',
      props:{
        cInfo:{
          type: Object,
          default(){
            return {}
          }
        },
        childMyMessage:{
          type: String,
          default: ''
        }
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
        info:{
          name: 'why',
          age: 18,
          height: 1.88
        },
        message:
          'aaaaa'
      },
      methods: {
      },
      components:{
        cpn
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

5、子组件向父组件通信

在这里插入图片描述

在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn @item-click="btnClick"></cpn>
  </div>

  <template id="cpn">
    <div>
      <button v-for="item in categories"
              @click="btnClick(item)">
        {{item.name}}
      </button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    // 1、子组件
    const cpn = {
      template: '#cpn',
      data(){
        return {
          categories: [
            {"id":"1","name":"热门推荐"},
            {"id":"2","name":"数码家电"},
            {"id":"3","name":"智能家居"},
            {"id":"4","name":"电脑办公"}
          ]
        }
      },
      methods:{
        btnClick(item){
          // console.log(item);
          // 子组件发射事件
          this.$emit('item-click',item)
        }
      }
    }
  // 2、父组件
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
        btnClick(item){
          console.log("item---->",item);
        }
      },
      components:{
        cpn
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

小码哥呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父子组件进行通信方式
weixin_47450807的博客
02-07 5100
在vue中如何实现父子组件通信，本篇博客将会详细介绍父子组件通信的流程。 如图所示，父组件向子组件传递数据，可以通过props，子组件向父组件传递数据可以通过触发事件来进行。 一、props 父组件向子组件传递的数据，通过props进行传递，我们可以把props理解为属性。props传递存在两种格式，一种是数组格式，另一种是对象类型格式。其中第二种对象类型可以设置是否为必须数据，以及是否存在默认值数据。 第一种用法：数组 //父组件 <HelloWorld :title="title">&l
父子组件通信常用方法
...
10-07 3002
父子组件通信常用方法
vue3_组件间通信方式
最新发布
分享程序相关知识
06-03 1101
vue3组件通信。
组件通信——子传父
Wen先森的博客
04-19 7153
具体而言，在Vue.js中，每个组件都可以看作是一个独立的实例，它们之间可以通过特定的Props和Events属性进行双向绑定和通信。子组件在初始化时可以接收来自父组件的数据，并通过props属性绑定这些数据。总之，“子传父”是Vue中非常重要的一个概念，它可以帮助我们更好地维护组件间的数据和功能的分离，同时也能提高程序的可读性和可维护性。Vue.js是一个组件化的前端开发框架，支持父子组件之间的消息传递和数据通信。子组件向父组件传递消息的过程称为“子传父”或“props down，events up”。
深度理解Vue组件的子组件向父组件传递数据的通信方式，全面详细，看这一篇就够了，推荐收藏
热门推荐
czjl6886的博客
11-28 1万+
深度理解Vue组件的子组件向父组件传递数据的通信方式：Vue子组件向父组件传递数据的通信方式有很多，我这里列举了三种，全面详细，看这一篇就够了，推荐收藏！
vue3-实现父子组件之间的通信（详解+源码）
wzy_PROTEIN的博客
06-07 6845
vue3相对于vue2的父子传参方式有所改变，本文介绍三种：父组件给子组件传参、父组件调用子组件内的方法、子组件调用父组件的方法，如果不需要一种一种看可以直接下滑看全部代码，有注释也蛮好理解。
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
Vue非父子组件通信详解
01-21
组件通信又包括父组件向子组件传数据，子组件向父组件传数据，非父子组件间的通信。前两种通信Vue的文档都说的很清楚，但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明，于是自己试着进行了...
vue记事本案例（父子组件通信）
08-20
在这个"vue记事本案例"中，我们重点探讨的是Vue.js中的父子组件通信，以及如何实现新增待办、删除待办（一键清空）、待办数量统计和持久化存储功能。 首先，让我们关注父子组件通信。在Vue.js中，父子组件之间的...
React 父子组件通信的实现方法
10-15
本文将详细探讨如何实现React父子组件之间的通信。 1. **父组件向子组件通信** 父组件向子组件传递数据通常通过`props`完成。在给定的例子中，`App`组件是父组件，它拥有`msg`、`name`和`age`这三个状态（`state`...
vue父子组件通信的高级用法示例
10-16
主要给大家介绍了关于vue父子组件通信的高级用法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
javascript父子通信
12-09
[removed] var parent =  {     //     say:function ()     {         //         alert(“parent_say”);     },     alert:function ()     {         //         alert(“parent”);         this.say();     } }; // parent.addChild(“child”,     {         //         say:function 
vue - 父子组件通信、插槽
hello world
12-01 1360
把子组件中的数据传递给父组件,父组件来使用;
vue父子组件简单通信
a8725585的博客
03-17 298
a.vue父组件中 .. import Bus from "bus.js"//引入中间vueexport defaul{ ... // 在组件 A 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... }) ...}    b.vue 子组件中 .. import Bus from "bus.js"//引入中间vue
Vue组件:父子通信,子父通信,非父子通信
聽凨不是雨的博客
06-29 345
在vue中只存在两种关系，即 父子关系和非父子关系，而组件通信也有三种情况: 1.父子通信 2.子父通信 3.非父子通信 文章目录1.自定义事件$emit 触发自定义事件$on 监听自定义事件2.父子通信父组件 father子组件 child3.子父通信父组件 father子组件 child4.非父子组件通信公共vue实例： busfarstlast 想要贯通子父通信和非父子通信，首先要知道什么是自定义事件 1.自定义事件 只要组件标签上绑定的有事件，别管什么事件，他都是自定义事件 $emit 触发自定
vue之父子组件间通信实例讲解(props、$ref、$emit)
weixin_43989275的博客
04-10 5837
组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。 在说如何实现通信之前，我们先来建两个组件father.vue和child.vue作为示例的基础： 这两部分的代码都很清晰明了，父组件通过...
Vue间的组件通信:props（父向子传递）、子向父的通信：$emit详解
markjustdoit的博客
09-07 2283
通常一个单页应用会以一棵嵌套的组件树的形式来组织： 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分 左侧内容区又分为上下两个组件 右侧边栏中又包含了3个子组件 各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。 先上代码： 描述：局部子组件能够显示父组件的title“玉树临风，潇洒倜傥”；当点击“点我呀”按钮，子父组件同时改变...
vue父子组件通信方式
07-14
Vue中父子组件通信有多种方式，以下是一些常用的方法： 1. Props/Attributes：父组件通过props向子组件传递数据，子组件通过props接收并使用这些数据。父组件可以在模板中直接绑定属性值，也可以通过v-bind动态绑定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值