Vue难点--兄弟组件通讯的情势(不行使Vuex)【上

这里就涉及到了两个问题,一个就是生命周期的问题,另外一个就是异步的问题

子父:

props: [
                'app'
        ],
    mounted() {
        this.gettext()
    },
    methods: { 
        //显示数据       
        gettext: function() {
           console.log(this.app)                    
        }
}

简单实例:

加入这个监听后,就能让你传不同的数据,在子组件中显示不同的数据了。

a.vue

这样写也不能说错对吧,但大家都知道mounted是组件加载完后在去加载他自己的,但prop比mounted加载的还要慢上一部所以我们这要去解决下异步的问题,这里我就放一个我常用的解决方案

  • 子组件在props中创建一个属性,用以接收父组件传过来的值
  • 在子组件标签中添加子组件props中创建的属性,把需要传给子组件的值赋给该属性

上海时时乐走势图官网 1

单向数据流

来再说下第二个问题,异步问题,什么叫异步,异步就是同时加载数据,同时加载的时候这时候就有坑了,大家要小心了。我的代码是这样写的

切记!不能直接使用这个props,一定要经过computed处理,原因我引用vue官方说明,点击下面页面:

 props: [
           'app'
        ],
    mounted() {
        this.gettext()
    },
    methods: { 
        gettext: function() {
            setTimeout(() => {
              console.log()
             }, 300)
        },

文中示例 github 地址:点我看实例。

在我用vue编写程序的时候,在传值的时候,经常会遇到些问题,像今天遇到了两个问题,在用父传子的方法去传值,当父组件中的要传的数据是for循环出来的或者是列表的时候,你想每次运行的事件,都去传某一行,或者某部分数据的时候,在子组件中用mounted(){},去加载并显示在页面上,还有就是在父传子中,把数据传过来了,但你运行事件的时候,哪个穿过来的数据值没有运行。

父子:

 

上海时时乐走势图官网 2

以上是我个人遇到的问题,并加以理解,可能有些地方我理解的有些偏差,但希望如果有遇到这些问题的人能够用着种方法去解决,并希望大神们,多多指教。


向我第一个问题中,生命周期的问题,当我父传子的时候,我传过来的数据在mounted中运行后,就相当与这个生命已经走向了了结束了。当你在去让别的值传进来,他显示的数据也同样不会发生变化,因为他的生命已经结束了,那怎么让他的生命在活过来呢?这就需要用到我们的监听了,监听这个数据后,让生命起死回生

示例中我们通过this.$emit() 去触发isLogFn 这个方法自定义事件,并将log 参数传递出去。

watch:{
        父组件传过来的值:function(){
            this.运行加载事件()
        }
    },

项目中,我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex。下面简单介绍一下使用传统方法,实现父子组件通信的方法。

这就是解决方案,加上一个定时器setTimeout他的时间最好在500以内,因为一个正常网页加载的速度差不多就是500ms作用

我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出。

     <template>
          <div class="bdiv" v-show="isLogin">我是组件B弹窗</div>
     </template>

     <script>
          export default {
               props: ['isLog'],
               data () {
                    return {

                    }
               },
               computed: {
                    isLogin () {
                         if(this.isLog == 'true'){
                              return true
                         } else {
                              return false
                         }
                     }
                 }
          }
     </script>

     <style>
          .bdiv{
               width: 200px;
               height: 200px;
               border: 1px #000 solid;
               margin: 0 auto;
          }
</style>

总结: 想要实现兄弟组件传值,一定要首先熟悉子父,父子之间的传值

App.vue


b.vue

到此,整个过程还没有结束,只是完成了一半。接下来我们要完成父子组件传值,将a组件的信息在传给b组件。

示例中,<aPage @isLogFn = "lisLogFn"></aPage> 监听isLogFn 去触发我们在父组件中定义的方法lisLogFn,并拿到传过来的 ‘log' 数据。完成子父传值。

在< bPage > 标签中绑定islog 属性,动态绑定data中的login 字段,在我们通过lisLogFn 方法拿到 ‘data'之后,我们要判断 data 传过来的数据,根据判断结果去改变data()中的数据,从而将数据传递给b组件。

Vue难点--兄弟组件通讯的情势(不行使Vuex)【上海时时乐走势图官网】。第二步,我们要在父组件中去监听这个自定义事件,去触发对应的方法,并接受a组件传过来的参数。此时我们就完成了子组件向父组件传值的过程。

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数。

最后,b组件中需要创建props,定义一个isLog 属性,这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据,最终供b组件使用。示例中,我们在v-show="isLogin" 中用来控制弹窗是否打开。

     <template>
          <div id="app">
               <aPage @isLogFn = "lisLogFn"></aPage>
               <bPage :isLog = "login"></bPage>
          </div>
     </template>

<script>
     import aPage from './components/a.vue'
     import bPage from './components/b.vue'
     export default {
          data () {
               return {
                    login: 'false'
               }
          },
          name: 'app',
          components: {
               aPage,
               bPage
          },
          methods: {
               lisLogFn (data) {
                    if (data == 'log') {
                         this.login = 'true'
                    }
                }
           }
     }
     </script>

     <style>
     </style>
     <template>
          <div class="adiv">
               <p>a组件</p>
               <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
          </div>
     </template>

     <script>
          export default {
               methods: {
                    handleClick () {
                         this.$emit('isLogFn','log')
                    }
               }
           }
     </script>

     <style>
          .adiv{
               width: 400px;
               height: 200px;
               border: 1px solid #000;
               margin: 0 auto;
           }
     </style>

主要的思路就是:Vue难点--兄弟组件通讯的情势(不行使Vuex)【上海时时乐走势图官网】。先子传父,在父传子


本文由上海时时乐走势图发布于web前端,转载请注明出处:Vue难点--兄弟组件通讯的情势(不行使Vuex)【上

您可能还会对下面的文章感兴趣: