Laravel 本地 vue 组件注册

Posted 2023-02-23

【中文标题】Laravel 本地 vue 组件注册

【英文标题】：Laravel local vue component registration

【发布时间】：2020-03-11 13:21:40

【问题描述】：

我知道我可以在位于 resources/js/app.js 的文件中注册全局组件。 我知道当我这样做时，我可以在任何地方使用这些组件（因为它们是全局的）。

但我不希望那样。我有一个很大的应用程序和不同的功能解决了不同的路线。所以我不希望我的所有视图中的所有组件都可用。

如何在本地注册我希望仅在一个视图中可用的组件？

谢谢

【问题讨论】：

视图只是刀片文件还是vue组件本身？

视图是刀片模板是的

【参考方案1】：

Vue js 在本地注册组件：

step-1 ) 将组件对象存储在变量中：

var demo = 
data: function() 
    return 
        message: 'This is a local components.'
    ;
,
    template: `
        <div>
             <h1>Component:  message </h1>
         </div>
    `
;

Step-2 ) 为我们要在本地注册的组件添加一个组件属性。

new Vue(
    el: '#app1',
     components:  /*Here we have added property*/
        'demo': demo
    
);

第三步）模板

<div id="app1">
     <demo></demo>
</div>

*注意：此属性应为object，并包含key-value 标记名称和配置对象对。

【讨论】：

这个我明白了，但是我可以把这段代码放在哪个js文件里呢？

【参考方案2】：

你可以通过在你的父vue组件中导入组件来做到这一点

<template>
    <div>        
        <child-component></child-component>
    </div>
</template>

<script>
import ChildComponent from '@/folder/ChildComponent'

export default 

    components: 
        ChildComponent
    ,    

</script>

【参考方案3】：

这是我遵循的方法。

在 resources/js/components/YourComponent.vue 的组件文件夹中创建一个新文件

<template>
  <div>
      <h2>My awesome component</h2>
  </div>
</template>

<script>
export default 
        

</script>

在你想要组件的视图中，你可以像下面这样导入它

<template>
  <div>
      <h2>Import another component</h2>
      <awesome-component></awesome-component>
  </div>
</template>

<script>
import awesomeComponent from "./components/YourComponent.vue";
export default 
    components: 
        'awesome-component': awesomeComponent
        

</script>

【讨论】：

这会引发错误 "message": "Uncaught SyntaxError: Cannot use import statement outside a module", "filename": "https://stacksnippets.net/js", "lineno": 18, "colno": 1