vue父子组件

2019年8月20日

父组件向子组件传值

props中的数据都是从父组件传递给子组件的
把父组件传递过来的parentmsg属性，先在数组中定义一下，才能使用这个数据

<script>
        var vm=new Vue({
           el:'#app',
           data:{
               msg:'父组件中的数据'
           },
           methods:{},
           components:{
               com1:{
               	   data(){},//注意:子组件中的data数据,并不是通过父组件传递过来的,而是子组件自身私有的,比如:子组件通过Ajax  ,请求回来的数据,都可以放到data身上;
               	   // data 上的数据,都是可读可写的;
                   template:'<h1>这是子组件---{{parentmsg}}</h1>',
                   props:['parentmsg'],  //把父组件传递过来的parentmsg属性，先在数组中定义一下，才能使用这个数据
               }
           }
        });
    </script>

页面中的使用

<div id="app">
        <!--父组件,可以在引用子组件的时候， 通过属性绑定( v-bind: )的形式，把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用-->
        <com1 v-bind:parentmsg="msg"></com1>
    </div>

结果

props中的数据都是只读的，无法重新复制，所以 如果需要修改props中的数据，就得修改父组件中的data数据

如果直接修改props ，页面刷新之后数据又会重写 使用的是父组件中的data数据

---

父组件向子组件传递方法

先创建父组件

var vm=new Vue({
           el:'#app',
           data:{},
           methods:{
               show(){
                   console.log('调用了父组件身上的show方法')
           }
           },
           components:{
               com2
           }
        });

父组件中声明了show方法
再创建子组件

var com2={
            template:'#tmp1',
            methods:{
                myclick(){
                    //emit是触发，调用
                    this.$emit('func')
                }
            }
        }

使用v-on事件绑定机制将show方法绑定到实例

<div id="app"><!--父组件向子组件传递方法使用的是事件绑定机制v-on，当我们自定义了一个事件属性机制之后 子组件就能通过某些方法来调用传递进去的这个方法了-->        
        <com2 @func="show"></com2>
    </div>

v-on的简写是@ 注意：等号右边的方法名不能带括号，如果带括号则是，先执行一次方法，然后将方法返回值赋值给左边的变量

然后在子组件的模板对象中调用show方法

<template id="tmp1">
            <div>
                <h1>这是子组件</h1>
                <input type="button" value="触发" @click="myclick">
            </div>
        </template>

将show方法绑定到mycilck中

var com2={
            template:'#tmp1',
            methods:{
                myclick(){
                    //emit是触发，调用
                    this.$emit('func')
                }
            }
        }

这里的$emit是由Vue提供的，参数是func ，而func则是在实例中绑定了show，
所以间接地 func==show

如果要向父组件传参的话
在这里

myclick(){
                    //emit是触发，调用
                    this.$emit('func',123,456)
                }

父组件接收参数

methods:{
               show(data,data2){
                   console.log('调用了父组件身上的show方法'+data+data2)
           }
           }

---

子组件向父组件传值的方法

先在父组件上创建接收对象

var vm=new Vue({
           el:'#app',
           data:{
               datamsgFormSon:null
           },
           methods:{
               show(data){
                this.datamsgFormSon=data
           }
           },
           components:{
               com2
           }
        });

this.datamsgFormSon=data

调用组件的时候

<com2 @func="show"></com2> 传递方法

子组件传值

 methods:{
                myclick(){
                    //emit是触发，调用
                    this.$emit('func',123)
                }
            }

这样父组件data中的datamsgFormSon就获得了从子组件中传递过来的值