vue component export使用cdn撰寫的疑問

vue.js vue component javascript

shen2255678 2022-02-07 11:35:42 ‧ 1246 瀏覽

分享至

目前公司使用cdn vue2的方式而非vue cli，日前我寫了一個component想要之後利用export default的方式引入先寫個sample測試發現以下問題。

發現了如果script scr="" 需要再加type="module"才能使用否則會出現Cannot use import statement outside a module的錯誤訊息去。

但解決後，.html有引用父元件的資料(圖一)會消失只剩子元件的資料(圖二)因此想問這樣是為什麼呢?不能同時圖一跟圖二都使用嗎?

(圖一)

(圖二)

index.html如下

<body>
    <div id="app">
        <my-component />
        <div >
            <div @click="number++"> number:{{number}}</div>
        </div>
        <div >
            <div @click="obj.num++">obj:{{obj.num}}</div>
        </div>
        <div >
            <div @click="objlistHandler(i)" v-for="(item,i) in objList">objList:{{item.num}}</div>
        </div>
        <div >
            <div @click="numberlistHandler(i)" v-for="(item,i) in numberList">numberList:{{item}}</div>
        </div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.js'</script>
    <script src="./watch.js " type="module" ></script>
</body>

app.js如下

export default{
    name:'app',
    template:`<h1>test</h1>`
    ,
    data(){
        return{}
    },
}

./watch.js

froce iT邦大師 1 級 ‧ 2022-02-07 14:28:03 檢舉

你watch.js又在#app上mount了一次當然會只有後面的，另外我看你的code也蠻莫名其妙的。

建議有要component就乖乖用cli。用html module某些瀏覽器是不支援的

shen2255678 iT邦新手 4 級 ‧ 2022-02-07 14:38:31 檢舉

好，我code是先用之前學watch的時候加進去測的!! 另外mount不是只能用一次嗎?我原本是直接在var vm 裡面用el: #app但發現還是一樣。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22088 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

vue component export使用cdn撰寫的疑問

尚未有邦友回答

標記使用者