5.Vue自定义组件使用

• 首页新建一个组件,命名可以小写 也可以驼峰命名
  
  image.png
  
  
  image.png

<template>
  <div class="video">
    <video>
      <source :src="mysrc" />
    </video>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      myvideo: null,
    };
  },
  props: {
    mysrc: ""
  },
};
</script>

• 使用

  
  
  image.png

<template>
  <div class="hello">
  <lym-video mysrc="http://img.ksbbs.com/asset/Mon_1605/25d705200a4eab4.mp4"></lym-video>
  </div>
  
</template>

<script>
// 使用全小写在html中直接引用即可  也就是<lymvideo mysrc="http://img.ksbbs.com/asset/Mon_1605/25d705200a4eab4.mp4"></lymvideo>
import lymvideo from '../components/lymvideo'
export default {
  name:"HelloWorld",
  components:{
      lymvideo
  }  
}

// 如果使用驼峰命名法：在html中需要设置“-”链接  也就是<lym-video mysrc="http://img.ksbbs.com/asset/Mon_1605/25d705200a4eab4.mp4"></lym-video>
import lymVideo from '../components/lymvideo'
export default {
  name:"HelloWorld",
  components:{
      lymVideo
  }  
}
</script>