精华内容
下载资源
问答
  • 父子组件通信
    千次阅读
    2022-05-26 20:36:08

    1. 父子组件通信

    在上一小节《React基础—PropTypes类型检查》中已经定义了父、子组件,接下来的工作就将在这个案例上做拓展。

    比如这里为列表右侧添加一个删除按钮,然后点击后删除本项条目。根据组件化的思想,且还未涉及到其余的父子控件传递数据(通信)的方式,这里就需要使用传递回调函数的方式来处理,也就是:

    • 在父控件中定义回调函数方法,然后通过props传递这个函数到子控件中;
    • 由子控件触发具体的事件函数,然后调用父控件传递的回调函数,通过参数传递本条数据的标识;

    比如下面的代码:

    // 子组件
    class Item extends Component {
        constructor() {
            super();
            this.state = {isHover: false}
        }
    
        handleDel = () => {
            // 向父控件发送请求,请求删除数据
            this.props.handleDelete(this.props.data.id)
        }
    
        handleMouseOver = () => {
            this.setState({isHover: true})
        }
    
        handleMouseOut = () => {
            this.setState({isHover: false})
        }
    
        render() {
            const {data} = this.props
            const {isHover} = this.state
            return (
                <div style={{display: "flex", flexDirection: "row", lineHeight: '1rem', width: '200px', padding: '8px'}}
                     className={isHover ? 'hoverStyle' : 'defaultStyle'}
                     onMouseOver={this.handleMouseOver}
                     onMouseOut={this.handleMouseOut}
                >
                    <div style={{flex: 1}}>{data.name}</div>
                    <div className={isHover ? 'delStyleHover' : 'delStyleDefault'} onClick={this.handleDel}>删除</div>
                </div>
            )
        }
    }
    
    // 可以限制一下传入子组件的参数的类型
    Item.propTypes = {
        data: PropTypes.object.isRequired
    }
    
    class PropTypesDemo extends Component {
        constructor() {
            super();
            this.state = {
                datas: [
                    {id: '001', name: "张三"},
                    {id: '003', name: "李四"},
                    {id: '002', name: "王五"},
                ]
            }
        }
    
        handleDelete = (id) => {
            // 删除id的数据
            const {datas} = this.state
            let temp_array = datas.filter((item) => {
                return item.id !== id
            })
            this.setState({datas: temp_array})
        }
    
        render() {
            const {datas} = this.state
            return (
                <div>
                    {
                        datas.map((item, index) => {
                            return <Item key={item.id} data={item} handleDelete={this.handleDelete}/>
                        })
                    }
                </div>
            );
        }
    }
    

    对应的css代码:

    .hoverStyle {
        background: #d4d4d4;
        cursor: pointer;
    }
    .defaultStyle {
        background: white
    }
    .delStyleHover{
        color:red;
        margin-left: 1.5rem;
        text-align: right;
        cursor: pointer
    }
    
    .delStyleDefault{
        color:white;
        margin-left: 1.5rem;
        text-align: right;
    }
    

    效果:
    在这里插入图片描述

    更多相关内容
  • 面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟。 无可否认,现在无论大厂还是小厂都已经用上了Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多。真的是前端开发人员必备技能。而且在...
  • 一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁。当然还是要根据自己的业务...
  • 组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信。前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明,于是自己试着进行了...
  • 主要给大家介绍了关于vue父子组件通信的高级用法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 1.父组件与子组件间的通信。 在 React 中,父组件可以向子组件通过传 props 的方式,向子组件进行通讯。 父组件 App.js import React, { Component } from 'react'; import './App.css'; import Child from './...
  • 父子组件通信

    2022-02-10 15:11:28
    1、父组件向子组件通信 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...

    在这里插入图片描述

    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>
    

    在这里插入图片描述

    展开全文
  • 主要给大家介绍了关于vue2利用Bus.js如何实现非父子组件通信的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。
  • 这里遇到了需要将login组件通过异步请求获得的用户信息传向 user组件,但是login和login组件不是父子组件,就暂称为兄弟组件吧。 简而言之,我要解决的就是兄弟组件之间的信息传递问题。 //位于login.vue 中 export...
  • 下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 一般来说,组件可以有以下几种关系,父子关系、兄弟关系和隔代关系,简化点可以分为父子关系和非父子关系,下面就讲讲vue父子组件通信以及非父子组件通信的方法。使用代码格式会比较乱,所以直接使用图片演示。1....

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系,父子关系、兄弟关系和隔代关系,简化点可以分为父子关系和非父子关系,下面就讲讲vue父子组件通信以及非父子组件通信的方法。使用代码格式会比较乱,所以直接使用图片演示。

    1.父子组件

    (1).父组件数据传递给子组件

    传递

    db6e65751b5c3a3da8cb0960f52125e7.png注:这里的child-msg必须用-代替驼峰,否则识别不到方法

    接收

    方式1

    224025a85f4646561b811eb6721caa12.png

    注:接收-改成驼峰

    方式2

    487064253934f5e05d411a8cd99fb095.png

    注:这里可以指定传入的类型,如果类型不对,会警告

    方式3

    ed509ee51a6edf4548634cd4a768a957.png

    注:指定类型。那我们也可以设置默认值

    (2).子组件数据传递给父组件

    传递

    3dd0230b6367fb183a46b6d2f17bc214.png

    注:fatherFunc是在父组件中定义的,要和父组件对应上

    接收

    a230bffb3ca08d5aa9c12ec5e0fa334d.png

    注:fatherFunc对应子组件中的this.$emit中的

    2.非父子

    创建空的实例放在根组件下,所有的子组件都能调用

    afa41d8ff768babb54b09c2a71423b9e.png

    注:这个空的实例,所有的组件都能调用,父子、非父子都可以

    传递方

    5d8a7e7192a42c863a55754d9bd32c6b.png

    接收方

    9f7cb16da6bf6f63b06fb36694b52874.png

    以上讲的并非全部vue组件数据通信方法,只是我在项目中用到的总结归类,vuex(状态管理)项目用到的比较少,后期用到了,再补充。这样父传子、子传父和非父子组件数据传递就完成了。

    展开全文
  • 组件通信可以分为:父子组件通信、兄弟组件通信、跨级组件通信 当子组件向夫父组件传递数据时就要用到,v-on除了监听DOM事件外,还可以用于组件的自定义事件子组件使用$emit()来触发事件,父组件用$on()来监听父组件...

    开篇

    先来一张图:
    在这里插入图片描述
    在这里插入图片描述
    了解组件通信首先要了解自定义事件,因为当子组件向父组件传递数据时,就要用到他,后面开始我们的正题

    1.1分类

    组件通信可以分为:父子组件通信、兄弟组件通信、跨级组件通信

    当子组件向夫父组件传递数据时就要用到,v-on除了监听DOM事件外,还可以用于组件的自定义事件子组件使用$emit()来触发事件,父组件用$on()来监听父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件

    使用 $on(eventName) 监听事件
    使用 $emit(eventName) 触发事件

    1.1.1初识组件props

    可能有些小伙伴对props这个组件还“不够”了解或者清楚,现在我这里举一些关于props有关的例子,如果非常清楚了,可以跳过这一节😎😎关于props这一节我本来是想要单独出一个文章“拿下它”,后续再看看有没有时间吧,这里举的例子是官网的例子噢
    在这里插入图片描述

    <div id="blog-post-demo" class="demo">
        <blog-post title="My journey with Vue"></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>
    </div>
    
    Vue.component('blog-post', {
            props: ['title'],
            template: '<h2>{{title}}</h2>'
        });
    
        var app = new Vue({
            el: '#blog-post-demo'
        })
    

    props非常简单,那就是——给子组件传递数据用的!通过这个例子,我想你应该知道谁是“父”,谁是“子”了吧🙋‍♀️
    在这里插入图片描述

    1.2案例

    🙋‍♀️🙋‍♀️那就来看一个例子

    <div id="app">
            <p>总数:{{total}}</p>
            <my-component @increase="handleGetTotal" @reduce="handleGetTotal">
            </my-component>
        </div>
    
    <script>
         Vue.component('my-component', {
           template: '\
           <div>\
            <button @click="handleIncrease">+1</button>\
            <button @click="handleReduce">-1</button>\
            </div>',
            data: function(){
                return {
                    counter: 0
                }
            },
            methods: {
                handleIncrease: function(){
                    this.counter++;
                    this.$emit('increase', this.counter);
                },
                handleReduce: function(){
                    this.counter--;
                    this.$emit('reduce', this.counter)
                }
            },
    });
        var app = new Vue({
            el: '#app',
            data: {
                total: 0
            },
            methods: {
                handleGetTotal: function(total){
                    this.total = total;
                }
            }
        })
    </script>
    

    在这里插入图片描述
    上述的代码是非常基础也是比较经典的一段理解父子组件之间通信的代码,简单分析一波:相信我,下面这张图如果你能够理解,那么恭喜你,你成功入门,这就是要自己深度理解的一个过程,花个一两分钟深入一下,事倍功半🍍
    在这里插入图片描述
    在这里插入图片描述

    1.3使用v-model玩玩

    v-model的最大的特点:双向绑定,注意,是双向,双方谁变了都会变,ok,那再来看一个例子

    <div id="app">
        <p>总数:{{total}}</p>
        <my-component v-model="total"></my-component>
        <button @click="handleGetTotal">点我试试!!</button>
    </div>
    
    <script>
         Vue.component('my-component', {
           props: ['value'],
           template: '\
           <input :value="value" @input="updateValue">',
            methods: {
                updateValue: function(event){
                    this.$emit('input', event.target.value);
                }
            },
           
    });
        var app = new Vue({
            el: '#app',
            data: {
                total: 0
            },
            methods: {
                handleGetTotal: function(){
                    this.total--;
                }
            }
           
        })
    </script>
    

    效果图截图
    在这里插入图片描述

    在这里插入图片描述
    再来分析一波!!
    在这里插入图片描述

    展开全文
  • 父子通信: 父向子传递数据是通过 props,子向父是通过 events(emit);通过父链/子链也可以通信(emit);通过父链 / 子链也可以通信(emit);通过父链/子链也可以通信(parent / children);ref也可以访问组件...
  • 给大家介绍了vue2.0父子组件及非父子组件之间的通信方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • React父子组件通信

    2022-03-06 22:25:03
    本文目录一、父子组件表单域通信1.1 受控表单域写法1.2 ref版表单域组件 一、父子组件表单域通信 1.1 受控表单域写法 新建Login.js组件,写入: import React, { Component } from 'react' class Filed extends ...
  • 主要介绍了vue实现父子组件之间的通信以及兄弟组件的通信功能,结合实例形式分析了vue.js组件间通信相关操作技巧,需要的朋友可以参考下
  • vue父子组件通信

    千次阅读 2022-04-21 23:55:32
    在父组件中,用 v-bind动态绑定一个自定义属性,用于给子组件传递数据 父组件: <template> <div> <child :users="user"></child> </div> </template> <script>...
  • vue中非父子组件通信

    千次阅读 2022-02-07 23:04:18
    在上一篇博客中,我们总结了父子组件通信方式有:props + emit。这里我们将总结一下,非父子组件通信方式,这里还不涉及到Vuex。 如果存在祖孙组件,我们可以通过Provide和Inject进行通信。 如果不是祖孙组件,也...
  • 引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型),第二个参数...
  • vue.js,是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和...下面这篇文章主要给大家介绍了关于vue项目中v-model父子组件通信实现的相关资料,需要的朋友可以参考下。
  • 本篇文章主要介绍了Vue2.0学习之详解Vue 组件及父子组件通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 一、非父子组件通信方式 1 状态提升(中间人模式) React中的状态提升概况来说,就是将多个组件需要共享的状态提升到它们最近的父组件上,在父组件上改变这个状态然后通过props分发给子组件 import React, { ...
  • 父子组件通信案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ...
  • 文章目录父子组件通信(1)props / emits①props使用props获取非 Prop 的 Attributeemits(子传父)(2)v-model / emits(3)ref / emits 父子组件通信 (1)props / emits ①props Father.vue <template> <...
  • vue父子组件通信方式哪几种

    千次阅读 2022-05-04 14:27:19
    第一种:props和$emit() ...父组件:{{message}}</div> <ChildrenComponet :message="message" @changeMsgFn="message=$event"/> </div> </template> <script> import ChildrenC

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,387
精华内容 9,754
关键字:

父子组件通信