精华内容
下载资源
问答
  • 父子组件通信

    2021-03-14 22:30:01
    1: 父子组件通信: 每一大的组件中都可以抽离出来很多小的组件: 但是每一个小的组件中的数据: 在哪里发送网络请求: 就是在在最外边发送网络请求: 获取到数据。 提供给每一个子组件使用数据: 拿到数据以后...

    1: 父子组件通信:

        每一大的组件中都可以抽离出来很多小的组件:  但是每一个小的组件中的数据: 在哪里发送网络请求: 

        就是在在最外边发送网络请求: 获取到数据。 提供给每一个子组件使用数据:  拿到数据以后可以保存到最外边组件中data 数据源中:

    2: 我们只需要在最外边的获取到的数据: 传递到子组件中: 然后使用v-for: 遍历。

          父子组件之间通信: 就是数据的传递。  传递事件。

    3: 父组件请求数据, 分发给子组件。  

    4: 子组件向父组件: 传递数据: 通过自定义事件: $emit  自定义事件名称: 发送事件名称。  vue 实例可以看作是一个跟组件。

    展开全文
  • 父子组件通信 - 理解: data选项为什么是一个函数? - 组件是一个聚合体,也是一个整体,它需要一个独立的作用空间,也就是它的数据需要是独立的,目前js的最大特点是函数式编程,而函数恰好提供了一个独立作用域...

    父子组件通信

     - 理解: data选项为什么是一个函数?
    
       - 组件是一个聚合体,也是一个整体,它需要一个独立的作用空间,也就是它的数据需要是独立的,目前js的最大特点是函数式编程,而函数恰好提供了一个独立作用域,所以我们data在出根组件外都是函数
    
     - 理解: 为什么data函数需要返回一个返回值,返回值还是对象,不能是数组吗?
    
       - Vue通过es5的Object.definePerproty属性对一个对象进行getter和setter设置,而data选项是作为Vue深入响应式核心的选项
    
     - 过程
    
       - 父组件将自己的数据同 v-bind 绑定在 子组件身上
    
       - 子组件通过 props属性接收
    
           <!-- 相当于父亲给儿子零花钱 -->
          <template id="father">
              <div>
                  <h3> 这里是father </h3>
                  <Son :money = "money"></Son>
              </div>
          </template>
          
          <template id="son">
              <div>
                  <h3> 这里是son </h3>
                  <p> 我收到了父亲给的 {{ money }} </p>
              </div>
          </template>
          
          <script>
            Vue.component('Father',{
              template: '#father',
              data () {
                return {
                  money: 10000
                }
              }
            })
          
            Vue.component('Son',{
              template: '#son',
              props: ['money']
            })
          
            new Vue({
              el: '#app'
            })
          </script>
    
       - props属性数据验证
    
       - 验证数据类型
    
       - 验证数据大小【 判断条件 】
    
             // props: ['money']
             // 数据验证
             // props: {
             //   'money': Number 
             // }
             props: {
                 'money': {
                     validator ( val ) { // 验证函数
                         return val > 2000
                     }
                 }
             }
    
    - 工作中: 第三方验证  
    
    - TypeScript   [ TS ]  
    
    - 插件   vue-validator  等  
    

    子父组件通信

     - 是通过自定义事件    
    
       - 事件的发布  
         - 通过绑定元素身上实现
       - 事件的订阅
         - 通过this.$emit触发
    
          // html <!-- 儿子给父亲红包 -->
          <div id="app">
              <Father></Father>
            </div>
            <template id="father">
              <div>
                <h3> 这里是father </h3>
                <p> 我现在有 {{ gk }} </p>
                <Son @give = "fn"></Son>
              </div>
            </template>
          
            <template id="son">
              <div>
                <h3> 这里是son </h3>
                <button @click = "giveHongbao"> 给父亲红包 </button>
              </div>
            </template>
    
          //js
          Vue.component('Father',{
              template: '#father',
              data ( ) {
                return {
                  gk: 0//初始钱为0
                }
              },
              methods: {//父亲要收到儿子的红包需要一个事件处理程序
                fn ( val ) {
                  this.gk = val //val是儿子要给父亲的钱,赋值给son的gk
                }
              }
            })
          
            Vue.component('Son',{
              template: '#son',
              data () {
                return {
                  money: 5000//儿子要给父亲的钱
                }
              },
              methods: {
                giveHongbao () {
                  this.$emit('give',this.money)//参一是绑定的事件fn,参二是传参到val
                }//事件的订阅通过this.$emit触发
              }
            })
            new Vue({
              el: '#app'
            })
    

    非父子组件通信

     - ref链
    

    在这里插入图片描述

     - bus事件总线
    
          var bus = new Vue()
          
            Vue.component('Father',{
              template: '#father'
            })
            Vue.component('Son',{
              template: '#son',
              data () {
                return {
                  flag: false
                }
              },
              mounted () { // 也是一个选项,表示组件挂载结束 , 也就是说我们可以在View视图中看到这个组件了
                // console.log( 'mounted ')
                // bus.$on(自定义事件名称,执行的事件处理程序)
                var _this = this
                bus.$on('cry',function () {
                  _this.flag = true
                })
          
              }
            })
            Vue.component('Girl',{
              template: '#girl',
              methods: {
                kick () {
                  bus.$emit('cry')
                }
              }
            })
            new Vue({
              el: '#app'
            })
    

    非常规手段进行组件通信 【 不推荐 】

     - 建议: 如果标准方案可以实现,就不要用非常规手段
    
     - 1. 可以实现子父通信
    
       - 父组件通过 v-bind 绑定一个方法给子组件
       - 子组件通过 props选项接收这个方法,然后直接调用
    
     - 2. 父组件 通过  v-bind 绑定 一个对象类型数据 给子组件 
       3. 子组件直接使用,如果更改这个数据,那么父组件数据也更改了
          - 原因: 同一个地址
          - 非常规在哪里?
            - 违背了单向数据流 
    
    展开全文
  • 上一篇文章()讲到父子组件通信,下面再聊聊非父子组件通信 

    上一篇文章讲到Vue中父子组件通信,下面再聊聊非父子组件通信:

    一.创建 input.vue 添加如下代码:

    <template>
      <div>
        <p>Input Component</p>
        <input type="text" v-model="message" placeholder="输入消息发送给dialog组件">
        <button @click="sendMessage">发送消息</button>
      </div>
    </template>
    <script>
    export default {
      name: "inputCom",
      data() {
        return {
          message: ""
        };
      },
      methods: {
        sendMessage(val) {
          // 事件名字自定义,用不同的名字区别事件
          this.$root.bus.$emit("changeMsg", this.message);
        }
      }
    };
    </script>
    <style scoped>
    </style>

    二.创建dialog.vue 添加如下代码:

    <template>
      <div>
        <p>Dialog Component</p>
        <p>Receive Message From Input Component:<span :class="active">{{InputMessage}}</span></p>
      </div>
    </template>
    <script>
    export default {
      name: "dialogCom",
      data() {
        return {
          message: "hello input",
          InputMessage: "未收到消息",
          active: "MessageNo"
        };
      },
      mounted() {
        this.$root.bus.$on("changeMsg", Value => {
          this.print(Value);
        });
      },
      methods: {
        print(Value) {
          this.InputMessage = Value;
        }
      },
      beforeDestroy() {
        this.$root.bus.$off("changeMsg");
      },
      computed: {
        classObject() {
          return {
            isReceived: this.InputMessage == "未收到消息" ? true : false
          };
        }
      },
      watch: {
        InputMessage: function() {
          console.log(this.active);
          this.active =
            this.InputMessage == "未收到消息" ? "MessageNo" : "MessageOk";
        }
      }
    };
    </script>
    
    <style scoped>
    .isReceived {
      color: red;
    }
    .MessageOk {
      color: green;
    }
    .MessageNo {
      color: red;
    }
    </style>

    三.创建nonParentChildCommunication.vue 文件添加如下代码:

    <template>
      <div>
        <h3>非父子组件通信</h3>
        <b>以下实现步骤:</b>
        <ul>
          <li>1.在 main.js 中 添加data属性
            <pre class="prettyprint" v-text="mainJSCode">
            </pre>
          </li>
          <li> 2.添加需要通信的非父子组件(项目中实现的步骤)</li>
          <li>
            2.1:创建 input.vue
            <pre v-text="inputCode" class="prettyprint"></pre>
          </li>
          <li>
            2.2创建 dialog.vue
            <pre v-text="dialogCode" class="prettyprint">
            </pre>
          </li>
          <li>
            2.3:nonParentChildCommunication.vue
            <pre v-text="nonParentChildCommCode" class="prettyprint"></pre>
          </li>
        </ul>
        <hr height="10px" color="red">
        <b>以下是效果:</b>
        <Input></Input>
        <hr>
        <Dialog></Dialog>
      </div>
    </template>
    <script>
    import Input from "./input";
    import Dialog from "./dialog";
    export default {
      name: "nonParentChildcommunication",
      data() {
        return {
          mainJSCode: `
            new Vue({
              el: '#app',
              data() {
                return {
                  bus: new Vue() // 给data添加一个 名字为eventHub 的空vue实例,用来传输非父子组件的数据
                }
              },
              router,
              components: {
                App
              },
              template: '<App/>',
    
            }).$mount('#app'); // 手动挂载,#app
          `,
          inputCode: `
              template:
                <div>
                  <p>Input Component!</p>
                  <input type="text" v-model="message" >
                  <button @click="sendMessage">发送消息</button>
                </div>
    
              script:
              export default {
                name: "inputCom",
                data() {
                  return {
                    message: ""
                  };
                },
              methods: {
                sendMessage(val) {
                  // 事件名字自定义,用不同的名字区别事件
                  this.$root.bus.$emit("changeMsg", this.message);
                }
              }
            };
          `,
          dialogCode: `
            template:
              <div>
                <p>Dialog Component!</p>
                <p>Input Component Transmit Message:{{InputMessage}}</p>
              </div>
    
            script:
            export default {
              name: "dialogCom",
              data() {
                return {
                  message: "hello input",
                  InputMessage: ""
                };
              },
              mounted() {
                this.$root.bus.$on("changeMsg", Value => {
                  this.print(Value);
                });
              },
              methods: {
                print(Value) {
                  this.InputMessage = Value;
                }
              },
              beforeDestroy() {
                this.$root.bus.$off("changeMsg");
              }
            };
          `,
          nonParentChildCommCode: `
            template:
              Input></Input>
              <hr height="10px" color="red">
              <Dialog></Dialog>
    
            script:
              import Input from "./input";
              import Dialog from "./dialog";
              export default{
                components: {
                  Input,
                  Dialog
                }
              }
          `
        };
      },
      methods: {},
      components: {
        Input,
        Dialog
      }
    };
    </script>
    <style scoped>
    pre.prettyprint {
      margin: 0 0 24px;
      padding: 10px 0px 4px 0px;
      background-color: #f6f8fa;
      border: none;
    }
    b {
      color: rgb(0, 47, 255);
    }
    </style>

    如果 不是特别清楚 请 下载 完整项目自己跑下就清楚了

    注意: src/components/Non-parent-childComponentsCommunicate下的文件为非父子组件通信

    展开全文
  • react组件通信,父子组件通信,跨级组件通信

    父子组件通信

    顾名思义就是父组件和子组件之间进行通信交流。下面先看样例代码:

    // 父子组件通信
    import React from "react";
    
    // 下面为父子组件通信实例代码
    // 父组件
    class ParentSon extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          msg: "father",
          name: "partent",
          age: 60
        };
      }
    
      callback = (msg, name, age) => {
        this.setState({ msg });
        this.setState({ name });
        this.setState({ age });
      };
    
      render() {
        return (
          <div style={{padding: 30+'px'}}>
            <h1>{this.state.msg}</h1>
            <Child
              callback={this.callback}
              age={this.state.age}
              name={this.state.name}
            ></Child>
          </div>
        );
      }
    }
    
    // 子组件
    class Child extends React.Component{
      constructor(props){
        super(props);
        this.state={
          msg: 'I am son',
          name: 'son',
          age: 8
        };
        // 下面一行代码是为了解决非箭头函数使用时this的指向问题不能指向当前子组件自身
        // this.change=this.change.bind(this);
      }
      // change(){
      //   // console.log(this);
      //   this.props.callback(this.state.msg,this.state.name,this.state.age);
      // }
      change=()=>{
        this.props.callback(this.state.msg,this.state.name,this.state.age);
      }
    
      render(){
        return (
          <div>
            <div>{this.props.name}</div>
            <div>{this.props.age}</div>
            <button onClick={this.change}>点击</button>
          </div>
        )
      }
    }
    
    export default ParentSon;
    

    如上面代码所示,分别创建了父组件 ParentSon 和子组件 Child ,父组件里面定义了自己的state内容,并定义了一个 callback 方法,此方法用来改变父组件自身的state内容值的,然后render函数里面除了渲染自身state里的msg值之外,将自身的callback方法以及自身state里的name,age分别作为参数传给了子组件 Child。

    下面再继续看子组件内部,除了有自己的state之外,还有一个change方法,然后render函数里渲染了来自props里的值以及一个点击事件按钮,而这个按钮点击事件就会触发调用自身那个change事件,在进入change方法内部会看到,实际上,执行的就是props接收的callback方法,也就是从父组件传过来的那个callback,而这里的参数又是子组件自身state的内容值,到此,我们可以顺一下整个思路了。

    思路: 一开始渲染出的全是父组件的值(因为子组件显示的就是来自父组件的值)-----> 点击按钮 -----> 触发子组件change事件(实际接收的父组件callback方法)-----> 父组件callback被调用,父组件的state里的值都发生改变,此时已变成和子组件state里一样的值了 -----> state改变后的值,又通过props传给了子组件Child -----> 再一次渲染出来传过来的值,即和子组件一模一样的值,此时整个过程全部结束。

    跨级组件通信

    顾名思义就是互不相干且之间隔了好几级的一种通信交流方式。下面先看样例代码:

    // 跨级组件通信
    import React from "react";
    
    const ThemeContext = React.createContext("light");
    
    class ContextMess extends React.Component {
      static contextType = ThemeContext;
      render() {
        return (
          <ThemeContext.Provider value="dark">
            <div style={{padding: 30+'px'}}>
              <h3>{this.context}</h3>
              <Toolbar></Toolbar>
            </div>
          </ThemeContext.Provider>
        );
      }
    }
    
    class Toolbar extends React.Component {
      render() {
        return (
          <div>
            <ThemedButton></ThemedButton>
          </div>
        );
      }
    }
    
    class ThemedButton extends React.Component {
      static contextType = ThemeContext;
      render() {
        return (
          <div>
            <h1>{this.context}</h1>
            <ThemeContext.Consumer>
              {value => (<h6>{value}</h6>)}
            </ThemeContext.Consumer>
          </div>
        );
      }
    }
    
    export default ContextMess;
    
    

    从上面代码可以看出,有三个组件,ContextMess ,Toolbar ,ThemedButton ,ContextMess 为最外层组件,依次是Toolbar 组件,再是ThemedButton 组件,逐层嵌套。
    代码中主要使用了react中的Context技术点,使用了Context中的以下几个API:React.createContext,Context.Provider,Class.contextType,Context.Consumer。

    React.createContext: 创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

    Context.Provider: 每个 Context 对象都会返回一个 Provider React 组件,它允许消费组件订阅 context 的变化;Provider 接收一个 value 属性,传递给消费组件;当 Provider 的 value 值发生变化时,它内部的所有消费组件都会重新渲染。

    Class.contextType: (代码中通过 static 来定义静态属性contextType,即组件(class)自己的属性,等同于class.contextType)挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它,包括 render 函数中。

    Context.Consumer: 这里,React 组件也可以订阅到 context 变更。这能让你在函数式组件中完成订阅 context;这需要函数作为子元素(function as a child)这种做法。这个函数接收当前的 context 值,返回一个 React 节点。传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider,value 参数等同于传递给 createContext() 的 defaultValue。

    思路: 简单来说,那个‘light’一开始创建的就相当于要在其他组件使用的数据,在 ContextMess 组件中通过使用 contextType 获取 createContext 创建的对象,然后通过this.context来获取值,即“light”;除此之外,使用 Context.Provider API 通过value参数将当前值改为“dark”,然后不使用 props 传值方式,在二级组件中可以看到,并没有使用props接收值,最后在下一级组件通过 Class.contextType 和 this.context 方式读取值,除此之外还使用 Context.Consumer API 来获取最近的那个匹配的context值,即改变后的值“dark”。

    具体Context相关知识及API使用请点击:React中Context的学习使用
    展开全文
  • 主要为大家详细介绍了Vue非父子组件通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本篇文章主要介绍了vue父子组件通信 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 父子组件通信(Communication) ◆组件间通信 父组件向子组件传递数据 ➬ ①前言②demo ➬还有一种形式叫做插槽 ◆子组件向父组件传递数据 ①前言 ②demo ③效果图 ◆非父子组件通信 ①前言 ②demo...
  • 主要介绍了Vue从TodoList中学父子组件通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信 自定义事件 当组件需要向父组件传递数据时,就要用到自定义事件,v-on 除了监听DOM事件外,还可以用于组件之间 的自定义事件。 JavaScript的设计模式里面...
  • 父子通信: 父向子传递数据是通过 props,子向父是通过 events(emit);通过父链/子链也可以通信(emit);通过父链 / 子链也可以通信(emit);通过父链/子链也可以通信(parent / children);ref也可以访问组件...
  • 主要介绍了React 父子组件通信的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 父-子组件通信 父组件到子组件通信,可以通过props。props有两种形式,一种是字符串数组形式,一种是对象形式。前者方式只是简单声明要传的值,后者需要指定传的值的类型。 子组件: <template> <div ...
  • vue父子组件通信

    2021-04-21 16:54:26
    vue 父子组件通信 1.1 父传子 props(组件通信) 1.2 父子组件通信-props驼峰标识 父子组件通信 props 如果用到驼峰标识会遇到问题(v-bind目前版本不支持驼峰,必须进行转化使用),一般建议props不使用驼峰传值,...
  • 本篇文章主要介绍了Vue2.0学习之详解Vue 组件及父子组件通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue 中主要核心功能有两个,第一:数据绑定系统,第二:组件系统,在组件中经常会遇到子组件触发父组件事件,父组件调用子组件方法,我们称组件通信,组件通信可以分为两种:第一种父子组件通信,第二种非父子组件通信,下面...
  • 一、父子组件通信 (1)、父组件传递数据给子组件,使用props属性来实现 父组件: <child message="love!"></child> 子组件: Vue.component('child', { // 声明 props props: ['message'], // 就像...
  • 父子组件通信简单来说就是利用回调函数获取value直接传递属性<Child :getChildValue="getChildValue" /> // 传递的是一个函数 Child组件里面可以使用 this.$attrs.getChildValue() 来调用通过@方式传递<...
  • 组件通信-父子组件通信案例 这个案例中有一个问题,就是value未定义我也不知道怎么解决 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 本篇文章主要介绍了Angular2 父子组件通信方式的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要给大家介绍了关于vue父子组件通信的高级用法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • Vuejs——(10)组件——父子组件通信.pdf
  • 主要介绍了Vuejs第十篇之vuejs父子组件通信的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue非父子组件通信问题及解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue非父子组件通信 (两个不同的组件通信)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,948
精华内容 7,579
关键字:

父子组件通信