VueComponent

         关于VueComponent:
            1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
 
            2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
              即帮我们执行了：new VueComponent(options)
 
            3. 特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent!!!
 
            4.关于this指向：
                1. 组件配置中：
                    data函数。method中的函数，watch中的函数，computed中的函数。他们的this均是【vueComponent实例对象】
                2. new Vue(options)配置中：
                    data函数。method中的函数，watch中的函数，computed中的函数。他们的this均是【vue实例对象】
            
            5.VueComponent的实例对象，以后简称vc （也可称之为：组件实例对象）
               Vue的实例对象，以后简称vm

 <body>
    <div id="root">
        <school></school>
    </div>
    <script>
        Vue.config.productionTip = false;
        const school = Vue.extend({
            template: `
                <div>
                    <h1>学校名称：{{name}}</h1>
                    <h1>学校地址：{{address}}</h1>
                    <button @click="show">点我显示this</button>
                </div>
            `,
            data() {
                return {
                    name: "lin",
                    address: "江西"
                }
            },
            methods: {
                show(){
                    console.log(this); //VueComponent
                }
            },
        });
        console.log(
            school)
        const vm = new Vue({
            el: "#root",
            components: {
                school
            }
        })
    </script>
</body>

posted @ 2022-07-18 18:02 小罗要有出息阅读(130) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue非单元组件

· Vue单文件组件

· 组件的this

· VueComponent构造函数

· VueComponent

公告

昵称：小罗要有出息
园龄： 3年2个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

VueComponent

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	关于VueComponent:
	1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

	2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
	即帮我们执行了：new VueComponent(options)

	3. 特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent!!!

	4.关于this指向：
	1. 组件配置中：
	data函数。method中的函数，watch中的函数，computed中的函数。他们的this均是【vueComponent实例对象】
	2. new Vue(options)配置中：
	data函数。method中的函数，watch中的函数，computed中的函数。他们的this均是【vue实例对象】

	5.VueComponent的实例对象，以后简称vc （也可称之为：组件实例对象）
	Vue的实例对象，以后简称vm

	<body>
	<div id="root">
	<school></school>
	</div>
	<script>
	Vue.config.productionTip = false;
	const school = Vue.extend({
	template: `
	<div>
	<h1>学校名称：{{name}}</h1>
	<h1>学校地址：{{address}}</h1>
	<button @click="show">点我显示this</button>
	</div>
	`,
	data() {
	return {
	name: "lin",
	address: "江西"
	}
	},
	methods: {
	show(){
	console.log(this); //VueComponent
	}
	},
	});
	console.log(
	school)
	const vm = new Vue({
	el: "#root",
	components: {
	school
	}
	})
	</script>
	</body>