Javascript VueJS:组件中未重新确认全局变量

我目前正在将我的前端升级为基于gulp的应用程序

我对Vue.js有一个问题，事实上，我有以下两个错误：

[Vue warn]：未在实例上定义属性或方法“params” 但在渲染期间被引用。请确保此属性为 反应式，无论是在数据选项中，还是对于基于类的组件 正在初始化属性。见：

[Vue warn]：呈现中出错：“TypeError:无法读取属性 未定义的“网站URL”

我的代码以前工作得很好，所以我不知道我的错误在哪里：/

这是我的html代码：

<script type="application/javascript">
  /** Params **/
  let params = {};
  let userData = {};

  params.websiteUrl = 'http://mywebsite.com/';
  params.websiteMediasUrl = 'http://medias.mywebsite.com/';
  params.websiteStatsUrl = 'http://stats.mywebsite.com/';

  userData.isLogged = 01;
  userData.isAdmin = 01;
  userData.canVote = 01;
</script>

<!-- FOSRoutingBundle -->
<script src="/bundles/fosjsrouting/js/router.js" type="application/javascript"></script>
<script src="/js/routing?callback=fos.Router.setData"></script>

<!-- Application -->
<script src="/build/js/vendor/bundle.js" type="application/javascript"></script> <!-- VueJs is here -->
<script src="/build/js/app/app.js" type="application/javascript"></script>
<!-- Search bar -->
<script type="application/javascript">
    Vue.component('media-info', {
        delimiters: ["<%", "%>"],
        props: {
            elt: {}
        },
        template: `<div class="media-box"><% params.websiteUrl %></div>`
    });

/**Params**/
设params={}；
让userData={}；
params.websiteUrl=http://mywebsite.com/';
params.webitedediasurl='1〕http://medias.mywebsite.com/';
params.websitestaurl='1〕http://stats.mywebsite.com/';
userData.isLogged=01；
userData.isAdmin=01；
userData.canVote=01；
Vue.组件（“媒体信息”{
分隔符：[“”]，
道具：{
elt:{}
},
模板：``
});

在我的HTML文件的某个地方，我调用

你知道吗/

---

谢谢

您必须将params变量添加到Vue组件的数据中

    Vue.component('media-info', {
    delimiters: ["<%", "%>"],
    data() {
        return {
           params,
        };
    },
    props: {
        elt: {}
    },
    template: `<div class="media-box"><% params.websiteUrl %></div>`
});

Vue.component（'media-info'{
分隔符：[“”]，
数据（）{
返回{
params，
};
},
道具：{
elt:{}
},
模板：``
});

它可以工作，谢谢，但我不明白它以前为什么能工作：/