vue父子组件间传值

最近因项目需求接触了vue，本人是后端开发，对vue很是陌生，别人的代码，搜索与列表是写成了两个vue组件，导致列表中的分页查询拿不到搜索框中的值，研究了两天，在这里记录一下，谁曾想到一个后端程序员写的第一篇博客是前端的（手动滑稽），因源代码拿不出来，在这里写个demo：

一、父组件向子组件传值，

比如要在父组件的1中输入值，同时子组件能在2中接受并显示，如下图：

 

1、创建一个父组件fu.vue和一个子组件zi.vue

在fu.vue中导入zi.vue 并自定义为child3，然后在components中注册child3，接下来在<template>标签中引入子组件标签<child3>

2、父组件向子组件传值需要用到props：['message2']，参数message2为子组件期望接受的属性值，这个属性值需要在父组件中进行绑定，使用v-bind:message2="message"，这里message为父组件的标签属性，代码如下：

<template>
  <div>
    <p>父组件 ：<input v-model="message" v-show="true"></p>
    <child3 v-bind:message2="message" ></child3>
    <!-- <child3 v-on:event='resp' ></child3> -->
  </div>
</template>
<script>
  import child3 from '@/components/zi.vue'
  export default{
    components:{
      child3
    },
    data(){
        return {
            message: '123' //初始化message
        }
    },
    methods:{
        // resp(data){
        //     alert(data)
        // }
    }
  }
</script>

 

子组件zi.vue

<template>
    <div>
        <p>子组件 ：接受的值：{{message2}}</p>
        <!-- <button v-on:click="up" >向父组件传值</button> -->
    </div>
</template>
<script>
  export default{
    props:['message2'],
    methods : {
        // up (){
        //     this.$emit('event','121212')
        // }
    }
  }
</script>

保存后看一下效果：

二、子组件向父组件传值

1、在子组件中添加一个按钮，用来触发事件

2、在事件up中使用$emit(param1,param2)，param1为父组件要监听的事件，param2为要给父组件传递的值。

3、在父组件中添加监听子组件的标签，在标签中使用    v-on:event='resp'，event为子组件中的事件，resp为父组件接收到参数后的响应事件，在这里我们把参数alert出来

4、保存后看效果

这样，我们就可以在子组件中向父组件传值了

三、总结

1、父向子传值，父组件中要绑定要发送的属性值，子组件要使用props：[param]接受期望得到的属性值；

2、子向父传值，子组件使用$emit('param1','param2')，创建事件，在父组件中监听该事件，接收到值后自定义响应事件；

3、不管是那个方向的传值，都需要在父组件中注册子组件