Can't vue instance data objects be used in Vue's extended instance constructor template?

get started with vue"s extend. There is a doubt: is it not possible to use vue instance data objects in Vue"s extended instance constructor template?

<div id="app">
        <sg></sg>
    </div>
    
    <script type="text/javascript">
    var authorExtend = Vue.extend({
        template: "

<a :href="url" target="_blank">{{siteName}}-{{msg}}</a>

", data: function() { return { url: "https://segmentfault.com", siteName: "sg" } } }); new authorExtend().$mount("sg"); var app = new Vue({ el: "-sharpapp", data: { msg: "1" } }); </script>

console error:

Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

so, the data of Vue instance is not used in the extension. What should I do if I want to use it?

Mar.21,2021

try this

new authorExtend({
    el: "-sharpapp",
    data: {
        msg: "1"
    }
})

the subclass you constructed is not used at all.

in fact, your idea is to create a module with a "subclass". Some of the templates in the module are processed directly by the subclass and partly by the parent class. But you are actually going the wrong way. You should use the ide/components.html" rel=" nofollow noreferrer "> component to solve the problem. "subclasses" are designed to be used in other scenarios.

Menu