使用 vue 在组件中编写 javascript 代码答案

【问题标题】：Writing javascript code in a component using vue使用 vue 在组件中编写 javascript 代码
【发布时间】：2021-10-10 09:48:35
【问题描述】：

我正在尝试使用 Vue 为我的 javascript 代码制作一个组件，但它不起作用。我的主要目标是使用 vue 或 Vue3 创建一个组件

    <head>
      <title></title>  
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head
    <body>

        <div id="app">
            <myelement name="ibrahim" age="12"></myelement>
        </div>

    </body>

    <script>
        Vue.component("myelement",{
            props:["name","age"], // for arguments 
            template:` 
            <h1> welcome to my vue component,<br> name :{{name }} and age : {{age}}</h1>
            
            `// template where my code template should be 
            
        })
        var vm = new Vue({ // creating an object from Vue
            el:"#app" // bind my created code to the id "app" 
        })
    </script>

此代码有效，但是当我放入 Javascript 代码而不是 html 代码时。我遇到了错误

此代码用于我的 Javascript 代码，但 vue 没有调用我的 javascript 代码。它只是在调用我的 html 代码

    <head>
      <title></title>  
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head
    <body>
        <h3>this page works</h3>
        <div id="app">
            <myelement ></myelement >
        </div>
        
    </body>

    <script>
        document.write("<h1>Header from document.write()</h1>");

        var temp = "<h1>Hello from vue veriable</h1>"
        
        Vue.component("myelement ",{
            template:` 
                <script>
                    alert(1);
                    document.write("<h1>Header from document.write()</h1>");
                </script>

            `// template where my code template should be 
            
        })
        var vm = new Vue({ // creating an object from Vue
            el:"#app" // bind my created code to the id "app" 
        })
    </script>

我想要做的是，当我在页面中创建标签时，alert(1) 就会出现。

【问题讨论】：

脚本不属于模板:)

标签： javascript vue.js vuejs3

【解决方案1】：

在vue中，你不能在组件模板中使用script标签，你会得到以下错误：

[Vue 警告]：编译模板时出错：模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如 <script>，因为它们不会被解析。

相反，您可以将您的 JavaScript 代码放入 created 生命周期挂钩中。这个钩子在你的组件创建时被调用：

<head>
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <h3>this page works</h3>
  <div id="app">
    <myelement></myelement>
  </div>
</body>

<script>
  Vue.component("myelement", {
    template: `<h2>Hello</h2>`,
  });
  var vm = new Vue({
    el: "#app",
    created() {
      alert(1);
      document.write("<h1>Header from document.write()</h1>");
    },
  });
</script>

【讨论】：

document.write 是你永远不想在vue 组件中使用的东西。我几乎在所有情况下都会使虚拟 dom 和实际 dom 不同步。
谢谢你，但我想传递一些参数，以便开发人员可以导入我的 javascript 库。然后他创建

【解决方案2】：

我不确定，但我认为这段代码可以正常工作：

<head>
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <h3>this page works</h3>
  <div id="app">
    <myelement :message="variableAtParent"></myelement>
  </div>
</body>

<script>
  Vue.component("myelement", {
    props: ['message'],
    template: '<p>At child-comp, using props in the template: {{ message }}</p>',,
  });
  var vm = new Vue({
    el: "#app",
    data: {
    variableAtParent: 'DATA FROM PARENT!'
    }
  });
</script>

【讨论】：