- 首页新建一个组件,
命名可以小写 也可以驼峰命名
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>
