scriptexport default name ZhuComponent props msg Number ;script我Vue组件中有了这个后怎么才能引入js后不报错并能使用我引入的js里的代码
<p>可以在Vue组件的生命周期方法中引入js文件,例如created或mounted方法,然后在方法中使用该文件中的代码。具体步骤如下:</p>
<ol>
<li>在Vue组件中引入需要使用的js文件,例如:</li>
</ol>
<pre><code><script>
import myScript from './myScript.js';
export default {
name: "ZhuComponent",
props: {
msg: Number,
},
created() {
myScript.doSomething(); // 在created生命周期方法中使用myScript.js中的代码
}
};
</script>
</code></pre>
<ol start="2">
<li>在Vue组件所在的页面中引入该组件,并确保该页面的<script>标签在组件前面,例如:</li>
</ol>
<pre><code><template>
<div>
<zhu-component :msg="123"></zhu-component>
</div>
</template>
<script src="./myScript.js"></script>
<script>
import ZhuComponent from './ZhuComponent.vue';
export default {
name: 'MyPage',
components: {
ZhuComponent,
},
};
</script>
</code></pre>
<p>这样就可以在Vue组件中使用myScript.js中的代码了。注意,如果需要使用Vue的实例属性或方法,可以通过this.$xxx来获取,例如this.$refs、this.$emit等。</p>
原文地址: https://www.cveoy.top/t/topic/bcek 著作权归作者所有。请勿转载和采集!