Vue中父子组件的传值

在该演示中，我主要注重传值的方式，没有复杂的功能。

准备工作：

第一步：新建两个vue文件。我建立的是：parent(父组件)与son(子组件)。
第二步：在父组件中引入子组件。

a.在父组件的script中，使用import引入子组件。

import Son from './son'; 
// 命名随意，后面调用的时候使用的就是这里的名字
// 在引用的时候一般不存在大写字母(自动转换成小写字母)
// 驼峰命名的时候中间是 '-'号

b.注册子组件。

components: {
     Son
 }

注册完成后，在父组件中，使用<son></son>标签就可以直接将子组件进行使用了。

1、父组件向子组件传值

parent.vue
在<son :title="src"></son>中绑定传递到子组件中的数据。记住自己定义的这个名字，在子组件中要用到。

<template>
  <div>
    <h1>父组件</h1>
    <son :title="src"></son>
  </div>
</template>

<script>
  import Son from './son'

  export default {
    name: "parent",
    data() {
      return {
        src: '这里是父组件中的信息，即将传递到子组件'
      }
    },
    /* 子组件注册 */
    components: {
      Son
    }
  }
</script>

<style scoped>

</style>

son.vue
在子组件中，设置父组件传递过来数据的默认值与类型。

props: {
      title: String,
      default: '当前还没有值传递过来。'
    }

现在的title就相当于是在子组件中定义的数据，可以直接使用。

<template>
  <div>
    <h1>子组件：{{title}}</h1>
  </div>
</template>

<script>
  export default {
    name: "son",
    data() {
    },
    props: {
      title: String,
      default: '当前还没有值传递过来。'
    }
  }
</script>

<style scoped>

</style>

效果如下：

2、子组件向父组件传值

效果图如下：

子组件向父组件传值，必须要有一个触发事件。所以在此，设置一个提交按钮，进行事件的触发。
son.vue
点击按钮之后，使用$emit触发父组件中的自定义事件。$emit有两个属性，第一个是自定义事件，在父组件中可以使用，第二个属性是要传递到父组件中的值。

<template>
  <div>
    <h1>子组件：</h1>
    <input type="submit" value="点击给父组件传值" @click="goParent"/>
  </div>
</template>

<script>
  export default {
    name: "son",
    data() {
      return {
        msg: '这里是子组件中的msg'
      }
    },
    methods: {
      goParent() {
        this.$emit('toParent', this.msg);
      }
    }
  }
</script>

<style scoped>

</style>

parent
在父组件中，绑定这个自定义事件，<son @toParent="dataSon"></son>，在定义事件的时候，dataSon函数就有一个参数，便是从子组件中传递过来的数据。

<template>
  <div>
    <h1>父组件：{{msgFormSon}}</h1>
    <son @toParent="dataSon"></son>
  </div>
</template>

<script>
  import Son from './son'

  export default {
    name: "parent",
    data() {
      return {
        msgFormSon: ''
      }
    },
    /* 子组件注册 */
    components: {
      Son
    },
    methods: {
      dataSon(data) {
        this.msgFormSon = data;
      }
    }
  }
</script>

<style scoped>

</style>

至此，父组件与子组件之间的传值就已经结束。