Vue中组件之间的通信

Posted hyh888

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中组件之间的通信相关的知识,希望对你有一定的参考价值。

组件

全局自定义组件   在任何一个实例中都可以使用

局部自定义组件   只能在当前的实例中使用

1.一个组件里面只能对应一个根标签

2.组件里面的内容写成返回值的形式

<div id="app">

{{ msg }}

<hr>

组件的使用,就相当于自定义的标签,组件的名称就可以当成一个自定义的标签

<li-component></li-component>

<demo-component></demo-component>

</div>

全局的组件

Vue.component(‘test-component‘,{         //组件的信息

   data(){

    return {

      msg : "test"

    }

  },

methods : {

},

template : `

  <div>

     <div>全局</div>

    <p>组件</p>

    <h1> {{ msg }}</h1>

    <li-component></li-component>

  </div>

`

})

Vue.component("li-component",{

  template : "<li>test - li - 01</i>"

)}

new Vue({

  el : "#app",

       data : {

      msg : ‘hello world‘

},

components : {

   ‘demo-component‘ : {

    template :  `<div>

      <h1>这是一个局部的组件</h1>

      <test-component></test-component>

      <li-component></li-component>

      </div>`

      }

    }

})

 

组件之间的传值-父传值,子传父,兄弟互传

父传子

<div id="app">

  {{ msg }}

  <hr>

  <h1>父组件</h1>

  <father-component></father-component>

</div>

<script>

// 定义一个父组件

Vue.component(‘father-component‘,{

  data(){

    return {

    fValue : ""

    }

  },

  template : `

    <div>

      <input type="text" v-model="fValue">

      <br>

      {{ fValue }}

      <hr>

      <h4>子组件</h4>

      <son-component v-bind:toSon="fValue" :abc="123"></son-component>

    </div>

  `

})

// 定义一个子组件

Vue.component(‘son-component‘,{

    props : [‘toSon‘,"abc"],

    template : `

      <div>

        接收到的内容为 : {{ toSon }}

        <h1>{{abc}}</h1>

      </div>

    `

})


new Vue({

  el : "#app",

  data : {

    msg : "hello"

  }

})

</script>

 

子传父 

<div id="app">

  {{ msg }}

  <hr>

  <father-component></father-component>

</div>

<script>

// 定义一个父组件

Vue.component(‘father-component‘,{

       data(){

      return {

      msg : ""

    }

  },

  methods : {

    reMsg : function(data){

      console.log(‘接收子组件传递过来的值为:‘ + data)

      this.msg = data;

    }

  },

template : `

  <div>

    <h1>父组件</h1>

    {{ msg }}

    <hr>

    <h4>子组件</h4>

    <son-component v-on:toFather="reMsg"></son-component>

  </div>

 `

})

// 定义一个子组件

Vue.component(‘son-component‘,{

  data(){

    return {

      abc : 456

    }

  },

  methods: {

    handleClick : function(){

    this.$emit(‘toFather‘,this.abc)

    // this.$emit(‘toFather‘,{"name":"jack","age":18})

    },

  },

  template : `

    <div>

      <button @click="handleClick">发送内容去父组件</button>

    </div>

  `

})

new Vue({

  el : "#app",

  data : {

    msg : "hello"

  }

})

</script>

 

组件之间的传值

<div id="app">
  {{ msg }}
  <hr>
  <father-component></father-component>
</div>

 

<script>

  // 定义一个父组件

  Vue.component(‘father-component‘,{

    data(){

      return {  

        name : "父组件的内容"
      }

    },

    methods : {

      checkSon : function(){

        console.log(this.$refs);

        console.log(this.$refs.mySon.name)

      }

    },

template : `

  <div>

    <h1>父组件</h1>

    <button @click="checkSon">查看子组件的属性</button>

 

    <hr>

    <h4>子组件</h4>

    <son-component ref="mySon"></son-component>

    </div>

  `

})

// 定义一个子组件

Vue.component(‘son-component‘,{

  data(){

    return {

      name : "子组件的内容"

    }

  },

  methods: {

    checkParent : function(){

      console.log(this.$parent.name)

      console.log(this.$parent)

 

    }

  },

  template : `

    <div>

      <button @click="checkParent">查看父组件的内容</button>

    </div>

  `

})

 


new Vue({

  el : "#app",

  data : {

    msg : "hello"

  }

})

 

</script>

 

兄弟组件之间传值

 

<div id="app">
  <xiongda></xiongda>
  <hr>
  <xionger></xionger>
</div>

<script>

 

  // 兄弟组件之间传值必须依靠外界
  // 依靠新的一个vue的实例
  var bus = new Vue(); //仅仅只是传值用的
  // 定义一个兄弟组件
  Vue.component(‘xiongda‘,{
    template : `
      <div>
        <h1>熊大</h1>
        <button @click="tellXiongEr">通知熊二</button>
      </div>
    `,
    methods : {
      tellXiongEr : function(){
        bus.$emit(‘toXiongEr‘,‘光头强来了‘)
      }
    },
    created : function(){
      bus.$on(‘toXiongDa‘,function(msg){
        console.log(‘熊大收到了消息:‘ + msg)
      })
    },
  })
  // 定义第二个兄弟组件
  Vue.component(‘xionger‘,{
    template : `
      <div>
        <h1>熊二</h1>
        <button @click="replyXiongDa">回复熊一</button>
      </div>
    `,
    created : function(){
      bus.$on(‘toXiongEr‘,function(msg){
        console.log(‘熊二收到了消息:‘ + msg)
      })
    },
    methods : {
      replyXiongDa : function(){
        bus.$emit(‘toXiongDa‘,‘我知道了‘)
      }
    }
  })

 


  new Vue({
    el : "#app",
    data : {
      msg : "hello"
    }
  })

 

</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以上是关于Vue中组件之间的通信的主要内容,如果未能解决你的问题,请参考以下文章

12.组件化开发2-非父子组件之间通信-祖先和后代之间的通信

vue父子组件之间的通信

Vue 组件间的通信方式

vue组件之间的通信, 父子组件通信,兄弟组件通信

vue中8种组件传参方式

vue 中组件与组件之间通信的方式