vue 3 中的属性绑定

Question

我是 Vue 的新手，目前正在尝试通过道具传递数据来动态更改视频或图像源 link。我创建了一个具有特定模板结构的组件，我想从主 app.js 页面传入源代码。我已经尝试在这两个区域绑定它，但不确定我是否正确地进行了绑定。我尝试使用常规 div 和其他东西将视频嵌入 app.js，它完美地显示了内容。

parent 元素包含 'Video' 个分量-

<Video theme="IL" :vidSrc="srcIL.vid"></Video>

import Video from "./components/Video.vue";

export default {
  name: "App",
  components: {
    Video
  },
  data() {
    return {
      srcIL: {
        vid: "./assets/invi-lines/invisible-lines-film.mp4"
      }
     
    };
 }

child 'Video component'

<template>
  <div class="introVid top">
    <video controls :src="vidSrc"></video>
  </div>
</template>

<script>
export default {
  props: ["theme", "vidSrc"]
};
</script>

Answer 1

您似乎已经正确设置了它，并且很难从提供的信息中确切知道是什么导致了问题，但我猜测可能是资产不是捆绑销售。

I tried using regular divs and stuff to embed the video in app.js and it shows the content perfectly

我怀疑你有类似的东西：

<video controls src="./assets/invi-lines/invisible-lines-film.mp4"></video>

这会从资产中取出资源并打包使用。有关详细信息，请参阅 relative-path-imports。

您可以尝试在项目中的某处使用 require 强制加载它们，这将强制编译器复制资产，但实际上，如果您有动态资产（假设有很多并且它们可以更改）您应该已经将它们放在 public 文件夹中，而不是在源文件夹中。所以我的建议是您将动态资源移动到 public 文件夹（假设这是您的问题）

vue 3 中的属性绑定

attribute binding in vue 3

data-binding

vue.js

vuejs3