Vue组件之间传值

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展

目录

组件与组件之间分为：

   1.父组件向子组件传值，

   2.子组件向父组件传值，

   3.兄弟组件之间的值传递。                 

 

                              

 父组件向子组件传值

父组件发送的形式是以属性的形式绑定值到子组件身上。

 <div id="app">
    <div>{{pmsg}}</div>
     <!-- 给子组件传入一个静态的值 -->
    <div :title='来自父组件的值'></div>
    <div :ptitle='ptitle'></div>
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });
  </script>

子组件通过" props"来接受父组件传来的值

 Vue.component('menu-item', {
      // 3、 子组件用属性props接收父组件传递过来的数据  
      props: ['title', 'ptitle'],
      data: function() {
        return {
          msg: '子组件本身的数据'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + ptitle}}</div>'
    });

    单项数据流：父组件传递给子组件的数据，子组件不能修改

     注意   ：1.父组件上自定义属性前面要是不加v-bind 会以字符串的形式传值给子组件，要是加v-bind会以js代码的格式解析后面的值

                   2.props中的属性如何使用和data上的数据访问规则是一样的（模板中访问 直接写名字，methods或者生命周期函数或者计算属性等访问 通过 this.名字）

 

 子组件向父组件传递

在父组件中，给子组件标签绑定，自定义事件，自定义事件的事件执行函数 指向父组件methods 上的某个方法;

在子组件中去触发 绑定在自己身上的自定义事件(点击事件：生命周期等等)

当自定义事件被触发，就会执行事件执行函数 也就是父组件 methods上的某个函数（该函数定义形参 用于接收子组件$emit 传递过来的参数 也就是子组件的数据）

<div id="app">
    <div>{{pmsg}}</div>
     //给子组件上绑定自定义事件
    <son  @my_data='handle'></son>
     //展示子组件传递过来的值
     {{ ptitle }}
  </div>

  <script type="text/javascript">
      Vue.component('menu-item', {
      data: function() {
        return {
          msg: '子组件本身的数据'
        }
      },
      // 子组件中绑定自定义事件，当我点击这个事件触发对应的事件执行函数
      template: '<div @click='clickhandle'></div>',
      methods:{
           clickhandle(){
     // 当自定义事件被触发时，就会触发事件函数也就是父组件methods上的某个函数
     //通过 $emit 向外"my_data"传递一个或者多个参数 父组件自定义事件就能接受传递过来的参数
              this.$emit('my_data',this.msg)
          }
       }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: ''
      }，
      methods：{
    //val  就是子组件传递过来的参数
         handle(val){
           this.ptitle= val
          } 
       }
    });
  </script>

     

 兄弟组件之间的值传递

兄弟之间传递数据需要借助于事件中心来传递数据

//事件中心 
let hub = new Vue 

事件中心提供三个方法：

     1.hub.$on ---添加事件监听

     2.hub.$emit  --触发自定义事件

     3.hub.$off   ---移除事件监听

 通过事件中心去给每个兄弟组件分别添加各自的事件监听

在每个兄弟组件身上 通过条件 触发 对方的事件 实现值的传递

  <div id="app">
        <button @click='handle>销毁事件监听</button>
        <span>
            <my_son1></my_son1>
        </span>
        <span>
            <my_son2></my_son2>
        </span>
    </div>
    <template id='temp1'>
        <div>
            <h4>a组件</h4>
            <button @click='clickhandle'>向b传值</button>
            <h3>
                接受到的值: {{pmgs}}
            </h3>
        </div>
    </template>
    <template id='temp2'>
        <div>
            <h4>a组件</h4>
            <button @click='clickhandle'>向b传值</button>
            <h3>接受到的值:{{pmgs}}</h3>
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        //  事件中心
        let hub = new Vue()
        var son1 = {
            mounted() {
                //利用 hub.$on来监听兄弟触发a_event自定义事件 ，val 接受兄弟事件传过来的数据
               //注意这里的 用的是箭头函数 因为需要用到this
                hub.$on('a_event', (val) => {
                    this.pmgs = val
                })
            },
            data() {
                return {
                    msgA: 'a组件里面的值',
                    pmgs: ''
                }
            },
            template: '#temp1',
            methods: {
                clickhandle() {
                //用 hub.$emit来触发自定义事件 b_event ，第二个参数就是向兄弟组件传入的数据
                    hub.$emit('b_event', this.msgA)
                }
            }
        }
        Vue.component('my_son1', son1)
        var son2 = {
            mounted() {
                hhb.$on('b_event', (val) => {
                    this.pmgs = val
                })
            },
            data() {
                return {
                    msgB: 'b组件里面的值',
                    pmgs: ''
                }
            },
            template: '#temp2',
            methods: {
                clickhandle() {
                    hhb.$emit('a_event', this.msgB)
                }
            }
        }
        Vue.component('my_son2', son2)
        var vm = new Vue({
            el: '#app',
            data: {},
          methods: {
          handle: function(){
          //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }


        })
    </script>

 

 

头一次书写，各位大佬多多提提意见   谢谢！！！