Vue的扩展实例构造器模板里面不可以使用vue的实例数据对象吗？

Question

在入门学习vue的extend。有疑惑：Vue的扩展实例构造器模板里面不可以使用vue的实例数据对象吗？

<div id="app">
        <sg></sg>
    </div>
    
    <script type="text/javascript">
    var authorExtend = Vue.extend({
        template: "<p><a :href='url' target='_blank'>{{siteName}}-{{msg}}</a></p>",
        data: function() {
            return {
                url: 'https://segmentfault.com',
                siteName: 'sg'
            }
        }
    });
    new authorExtend().$mount('sg');
    var app = new Vue({
        el: "#app",
        data: {
            msg: "1"
        }
    });
    </script>

控制台报错：

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.

所以，Vue实例的数据用不到扩展里面，如果想用，应该怎么弄？

Answer 1

试试这样吧

new authorExtend({
    el: "#app",
    data: {
        msg: "1"
    }
})

Answer 2

你构造的子类完全没有用到啊……

其实你的想法是用一个“子类”创建一个模块，模块中的模板一部分由这个子类直接处理，一部分由父类处理。但你其实走错路了，你应该用组件解决问题。“子类”是设计用在别的场景中的。