Vue组件

动态组件

<component v-bind:is="currentTabComponent"></component>

Prop

子组件

<template>
  <div class="blog-post">
    <h3>{{ post.title }}</h3>
    <button @click="emitMethod">Enlarge text</button>
    <div v-html="post.content"></div>
  </div>
</template>
<script>
export default {
    props:['post'],
    methods:{
        emitMethod(){
            //父组件中可以通过$event获取到这个0.1的参数
            // 或者放到function(event)参数里边
            this.$emit('emit',0.1)
        },
    }
};
</script>

父组件

<template>
  <div>
    <blog-post post="hha" @emit="postFont + $event"></blog-post>
    <blog-post post="hha" @emit="getEmit"></blog-post>
  </div>
</template>
<script>
export default {
  props: ["post"],
  methods: {
    getEmit(event) {
      console.log(event);
    },
  },
};
</script>

v-model

<input v-model="searchText">

等价于

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

在组件上的写法

<template>
  <input
    v-bind:value="inputValue"
    v-on:input="$emit('input', $event.target.value)"
  />
</template>
<script>
export default {
  props: ["inputValue"],
};
</script>

父组件

<custom-input v-model="searchText"></custom-input>

插槽分发内容

父组件

<alert-box>
  Something bad happened.
</alert-box>

子组件

<div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
</div>