vue 父子组件传值

• vue父组件向子组件传递数据？
  通过props
• 子组件像父组件传递事件？
  $emit方法

props

验证的类型可以是：

String，Number，Boolean，Object，Array，Function

props: {
    props1: Number,  //必须是数值类型
    props2: [String, Number],  // 数字类型 || 字符串
    props3: {
        type: Number,  // 数值型   true为必传
        required: true
    },
    props4: {
        type: Boolean,  // 布尔值  default默认为true
        default: true
    },
    props5: {
        type: Array,  // 如果是数组 || 对象 默认值必须是一个函数返回
        default: function{
            return [];
        }
    }
}

父组件如下：

<template>
    <div>
        <input type="text" v-model="msg"> <!-- v-model双向绑定 -->
        <son :datas=msg></son> <!-- 子组件通过datas接收msg数据 -->
    </div>
</template>
<script>
    import son from '引入子组件';
    export default {
        component: { son }, // 注册组件
        data() {
            return {
                msg: '我是父组件数据'
            }
        }
    }
</script>

子组件如下：

<template>
    <div>
        {{datas}}
        <!--这里就可以传过来的显示数据了-->
    </div>
</template>
<script>
    export default {
        props: {
            datas: {       // 这里的datas用于接收
                type: String,   // 我们接收验证的是字符串 也可以验证别的类型
            }
        }
    }
</script>

$emit方法

父组件

<template>
  <div>
    <child show-txt="show"></child>
    <div v-if="name">name: {{ name }}</div>
    <div v-if="age">age: {{ age }}</div>
  </div>
</template>

<script>
import { Child } from "Child";
export default {
  data() {
    return {
      name: "",
      age: ""
    };
  },
  methods: {
    show(data) {
      this.name = data.name;
      this.age = data.age;
    }
  }
};
</script>

子组件

<template>
  <button @click="on_click">btn</button>
</template>

<script>
export default {
  methods: {
    on_click() {
      this.$emit("show-txt", { name: "Rabbit", age: 18 });
    }
  }
};
</script>