vue组件数据交互

1：父组件向子组件传值

<div id="app">
    <com :pad="msg" content="xiaoming"></com>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'这是父组件'
        },
        methods:{

        },
        components:{
            data:{

            },
            com:{
                template:'<h1>这是子组件{{pad}}{{content}}</h1>',
                props:['pad','content'] /*这是一个数组专门获取父组件的数据*/
            }
        }

    });
</script>

你可以发现在子组件中有了父组件的内容

父组件向子组件传值-props属性值类型

• 可以传递静态值
• 也可以传递动态值
• 动态值可以是 字符串 数字 布尔值 数组 对象（重点）

这里知识点要注意的就是绑定的问题

 <div id="app">
    <com :pad="msg" content=12></com>//请注意这里没有绑定的
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'这是父组件'
        },
        methods:{

        },
        components:{
            data:{

            },
            com:{
                template:'<h1>这是子组件{{pad}}{{typeof content}}</h1>',
                props:['pad','content'] /*这是一个数组专门获取父组件的数据*/
            }
        }

    });

如果不绑定的话它的类型就是string

如果绑定的话的话 就是number

 <com :pad="msg" :content="12"></com>

其实父组件也可以想子组件传递数组，对象等

例：

<div id="app">
    <com :pad="msg" :content=12 :parr="parr" :gif="gif"></com>
</div>

<script>
    Vue.component('com', {
        props: ['pad','content','parr','gif'],
        template: `
        <div>
             <h1>这是子组件{{pad}}{{typeof content}} </h1>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
            <p>{{gif.name}}</p>
            <p>{{gif.age}}</p>
          </div>
        </div>
      `
    });
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'这是父组件',
            parr: ['apple','orange','banana'],
            gif:{
                name:'许爱明',
                age:24
            }
        },
        methods:{

        },

    });

要注意一点的事在局部写组件的时候这样传送数组会报错误的

2：子组件向父组件传值

• 子组件用$emit()触发事件
• $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
• 父组件通过事件监听监听子组件传递过来的数据

比如来做一个例子：点击子组件的按钮扩大父组件的字体大小

 <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>

    <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
  </div>
  <script src="../../js/vue-2.4.0.js"></script>
  <script type="text/javascript">
    /*
      子组件向父组件传值-基本用法
      props传递数据原则：单向数据流
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
          <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(){
          // 扩大字体大小
          this.fontSize += 5;
        }
      }
    });
  </script>

3：非父子组件之间传值

来做一个案例：比如点击test组件的按钮的时候，jest加一，

点击jest组件的按钮的时候，test加2

div id="app">
    <test></test>
    <jest></jest>
</div>
<script src="../../js/vue-2.4.0.js"></script>
<script>
    //提供事件中心
    var h=new Vue();
    Vue.component("test",{
       data:function(){
           return{
               num:0
           }
       },
        template:
            `   <div>
                    <p>TOM:{{num}}</p>
                    <button @click="tomb">点击</button>
                </div>

            `,
        methods:{
           tomb:function () {
               //触发jom事件
               h.$emit('jom-event',1);
           }
        },
        mounted:function () {
           h.$on('tom-event',(value)=>{
               this.num+=value;
           })
        }
        
    })
    Vue.component("jest", {
        data: function () {
            return {
                num: 0
            }
        },
        template:
            `   <div>
                    <p>jOM:{{num}}</p>
                    <button @click="tomb">点击</button>
                </div>

            `,
        methods: {
            tomb: function () {
                h.$emit('tom-event',2);
            }
        },
        mounted:function () {
            h.$on('jom-event',(value)=>{
                this.num+=value;
            })
        }
    })

    var app=new Vue({
        el:'#app',
        data: {
            msg:''
        }
    });

</script>