Vue自定义组件属性传值

定义一个组件，其中
props表示调用方通过属性绑定传入的参数

<template>
  <div>
    {{ imgList }}
  </div>
</template>

<script>
export default {
  name: "MyCarousel",
  props: {
    imgList: String
  }
}
</script>

调用方通过**:属性名**进行属性绑定

<template>
  <div class="about">
    <MyCarouse :imgList="imgLists"></MyCarouse>
  </div>
</template>

<script>
import MyCarouse from '../components/MyCarousel'
export default {
  name: 'About',
  components: {
    MyCarouse
  },
  data() {
    return{
      imgLists:"12345678"
    }
  }
}
</script>

注意属性绑定的两种写法

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

当然类似的也有事件绑定简写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>