如何在Vue的父子组件之间传递数据和调用方法

一、传递数据

有时 在子组件中需要用到父组件的数据
然鹅 在默认情况下 子组件中是无法访问到父组件中的data数据和methods中的方法的

父组件可在在引用的时候通过属性绑定(v-bind)的方式将将需要传递给子组件的数据传递给子组件
然后 在子组件中通过props属性进行定义即可

<script>
    var vm=new Vue({
       el:'#app',
       data:{
           mymsg:"123"
       },
       methods:{},
       components:{
           childcom:{
               template:"<h1>{{parentmsg}}</h1>",
               // 组件中的所有props中的数据都是通过父组件传递给子组件的
               // 将父组件传递过来的parentmsg属性在props数组中进行定义 如此 才可使用该数据
               props:["parentmsg"]
           }
       }
    });
</script>

在子组件标签上 用v-bind进行绑定：

<div id="app">
	<!-- 父组件可在在引用的时候通过属性绑定(v-bind)的方式将将需要传递给子组件的数据传递给子组件 -->
	<childcom v-bind:parentmsg="mymsg"></childcom>
</div>

其中 子组件中的data和props的区别是：

• 1、data中的数据是子组件自身的数据 和父组件无关
  而props里的数据是通过父组件传递给子组件的

• 2、data里的数据是可读可写的
  而props里的数据都是只读的 无法重新赋值

---

二、调用方法

在子组件中调用父组件里面的方法

不仅能调用方法 还可通过调用方法的方式进行传值 将值作为方法的参数进行传递
这个传递的值 包括对象类型

父组件可在在引用的时候通过事件绑定(v-on)的方式将将需要传递给子组件的方法传递给子组件

以下为一个子组件调用父组件的方法传递给父组件对象类型的数据的案例：

首先 在Vue实例里定义一个要传递的方法和组件名：

var vm=new Vue({
           el:'#app',
           data:{
               fathermsg:null
           },
           methods:{
               // 将传入的子组件的数据给自己
               getData(data)
               {
                   this.fathermsg=data
               }
           },
           // 定义子组件
           components:{
               mycomponent
           }
        });

然后 定义一个子组件模板对象：

// 定义字面量类型的组件模板对象
        var mycomponent={
            template:"#tmpl", // 指定id 加载该id的template元素中的内容作为组件的HTML结构
            methods:{
                // 子组件的点击方法
                myclick()
                {
                    // 当点击子组件按钮时 调用父组件传递来的方法
                    // $emit() 触发某个事件 往里传入父组件传来的方法的自定义的事件名即可
                    this.$emit("myfunction",this.sonmsg)
                }
            },
            // 定义子组件要传给父组件的数据
            data:function()
            {
                return {
                    sonmsg:{name:"sonson",age:12}
                }
            }
        }

定义一个子组件 该子组件触发子组件的私有方法：

<!-- 自定义的子组件 -->
<template id="tmpl">
	<div>
		<h1>child component</h1>
		<input type="button" value="触发" @click="myclick">
	</div>
</template>

最后 将组件放置在页面上

用v-on为该子组件自定义一个事件属性 传递父组件中的方法：

<!-- Vue实例管理的区域 -->
<div id="app">
	<!-- 使用事件绑定机制传递方法 -->
	<!-- 自定义一个事件属性 然后子组件调用传入的父组件的方法 -->
	<mycomponent v-on:myfunction="getData"></mycomponent>
</div>

简单来说 就是：

• （1）、在组件的HTML标签上用v-on绑定一个事件(事件名可任取) 事件对应的方法就是父组件methods里面定义的方法
  该方法也就是父组件所要传递给子组件 让子组件执行的方法

• （2）、在定义子组件的Vue实例中 在某个方法里用this.$emit("事件名称")触发组件上的事件
  第二个开始的参数 是要传递的值(可选)
  例如：
  若要传递一个参数：this.$emit("事件名称",第一个参数)
  若要传递两个参数：this.$emit("事件名称",第一个参数,第二个参数)
  以此类推

• （3）、在子组件中调用该方法即可

实际上就是子组件调用子组件的方法 只是子组件的方法和父组件传入的方法进行了关联 因此可同时调用父组件中的方法

---