Vue非单元组件

基本使用

         Vue中使用组件的三大步骤：
            一，定义组件（创建组件）
            二，注册组件
            三，使用组件（写组件标签）
        一，如何定义一个组件？
            使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别
            区别如下：
                1. el  不要写，为什么？--最终的所有组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
                2. data必须写成函数式，为什么？--避免组件被复用时，数据存在引用关系（防止数据紊乱）
            备注：可以使用template配置组件结构
        二，如何注册组件？
            1. 局部注册：靠 new Vue 的时候传入components选项
            2. 全局注册：靠 Vue.component('组件名',组件)
        三，编写组件标签;
            <组件标签></组件标签>

测试

 <body>
    <div id="root">
            <school></school>
            <hr>
            <student></student>
            <test></test>
    </div>
 
    <script>
        Vue.config.productionTip = false;
 
        const school = Vue.extend({
            template: `
                <div>
                    <h1>学校名称：{{name}}</h1>
                    <h1>学校地址：{{address}}</h1>
                </div>
            `,
            data(){
                return {
                    name:"lin",
                    address:"江西"
                }
            }
        });
        const student = Vue.extend({
            template:`
            <div>
                <h1>学生名称：{{name}}</h1>
                <h1>学生年龄：{{age}}</h1>
            </div>
            `,
            data(){
                return{
                    name:"刘少杰",
                    age:20
                }
            }
 
        })
 
        const test = Vue.extend({
            template:`
            <div>
                <h1>在此测试全局注册组件</h1>
            </div>
            `
        })
 
        //全局注册组件
        Vue.component("school",school);
        Vue.component("test",test);
 
        new Vue({
            el: "#root",
            components:{
                school,
                student
            }
        })
    </script>
</body>

需要注意的点

         几个注意点：
            1.关于组件名：
                一个单词组成：
                    第一种写法（首字母小写）:school
                    第二种写法（首字母大写）：School
                多个单词组成： 
                    第一种写法（kebab-case命名）：my-school
                    第二种写法(CamelCase命名)：MySchool(需要Vue脚手架支持)
                备注：
                    1. 组件名尽量回避HTML中已有的元素名称，例如：h2,H2 都不行
                    2. 可以使用name配置项指定组件在开发者工具中呈现的名字
            2. 关于组件标签
                第一种写法<school></school>
                第二种写法<school/>
                注意：不使用脚手架时，<school/>会导致后续组件不能渲染
            3. 一个简写方式
                const school = Vue.extend(options) 可简写成： const school = options(Vue底层会自动帮我们使用Vue.extend（）)

演示组件嵌套

 <body>
    <!-- 
        在vue的根容器中，创建一个组件（app），来统领所有组件
     -->
    <div id="root">
 
    </div>
 
    <script>
        Vue.config.productionTip = false;
        //要先加载student，才能加载school组件
        const student = {
            name: "liu",
            template: `
            <div>
                <h1>学生名称：{{name}}</h1>
                <h1>学生年龄：{{age}}</h1>
            </div>
            `,
            data() {
                return {
                    name: "刘少杰",
                    age: 20
                }
            }
 
        }
 
        const school = Vue.extend({
            template: `
                <div>
                    <h1>学校名称：{{name}}</h1>
                    <h1>学校地址：{{address}}</h1>
                    <student></student>
                </div>
            `,
            data() {
                return {
                    name: "lin",
                    address: "江西"
                }
            },
            components: {
                student
            }
        });
        const hello = {
            template: `<div>
                <span>{{msg}}</span>
                </div>`,
            data() {
                return {
                    msg: "你好",
                }
            }
        }
 
        const app = Vue.extend({
            template: `
            <div>
                <hello></hello>
                <school></school>
            </div>
            `,
            components: {
                hello,
                school
            }
        })
 
 
        new Vue({
            template: `<app></app>`,
            el: "#root",
            components: {
                app
            }
        })
    </script>
</body>

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

刷新页面返回顶部

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

相关博文：

· VueComponent

· Vue单文件组件

· [Vue]组件入门——非单文件组件

· Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）

· Vue非单文件组件

公告

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

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

Vue非单元组件

基本使用

测试

需要注意的点

演示组件嵌套

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	Vue中使用组件的三大步骤：
	一，定义组件（创建组件）
	二，注册组件
	三，使用组件（写组件标签）
	一，如何定义一个组件？
	使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别
	区别如下：
	1. el 不要写，为什么？--最终的所有组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
	2. data必须写成函数式，为什么？--避免组件被复用时，数据存在引用关系（防止数据紊乱）
	备注：可以使用template配置组件结构
	二，如何注册组件？
	1. 局部注册：靠 new Vue 的时候传入components选项
	2. 全局注册：靠 Vue.component('组件名',组件)
	三，编写组件标签;
	<组件标签></组件标签>

	<body>
	<div id="root">
	<school></school>
	<hr>
	<student></student>
	<test></test>
	</div>

	<script>
	Vue.config.productionTip = false;

	const school = Vue.extend({
	template: `
	<div>
	<h1>学校名称：{{name}}</h1>
	<h1>学校地址：{{address}}</h1>
	</div>
	`,
	data(){
	return {
	name:"lin",
	address:"江西"
	}
	}
	});
	const student = Vue.extend({
	template:`
	<div>
	<h1>学生名称：{{name}}</h1>
	<h1>学生年龄：{{age}}</h1>
	</div>
	`,
	data(){
	return{
	name:"刘少杰",
	age:20
	}
	}

	})

	const test = Vue.extend({
	template:`
	<div>
	<h1>在此测试全局注册组件</h1>
	</div>
	`
	})

	//全局注册组件
	Vue.component("school",school);
	Vue.component("test",test);

	new Vue({
	el: "#root",
	components:{
	school,
	student
	}
	})
	</script>
	</body>

	几个注意点：
	1.关于组件名：
	一个单词组成：
	第一种写法（首字母小写）:school
	第二种写法（首字母大写）：School
	多个单词组成：
	第一种写法（kebab-case命名）：my-school
	第二种写法(CamelCase命名)：MySchool(需要Vue脚手架支持)
	备注：
	1. 组件名尽量回避HTML中已有的元素名称，例如：h2,H2 都不行
	2. 可以使用name配置项指定组件在开发者工具中呈现的名字
	2. 关于组件标签
	第一种写法<school></school>
	第二种写法<school/>
	注意：不使用脚手架时，<school/>会导致后续组件不能渲染
	3. 一个简写方式
	const school = Vue.extend(options) 可简写成： const school = options(Vue底层会自动帮我们使用Vue.extend（）)

	<body>
	<!--
	在vue的根容器中，创建一个组件（app），来统领所有组件
	-->
	<div id="root">

	</div>

	<script>
	Vue.config.productionTip = false;
	//要先加载student，才能加载school组件
	const student = {
	name: "liu",
	template: `
	<div>
	<h1>学生名称：{{name}}</h1>
	<h1>学生年龄：{{age}}</h1>
	</div>
	`,
	data() {
	return {
	name: "刘少杰",
	age: 20
	}
	}

	}

	const school = Vue.extend({
	template: `
	<div>
	<h1>学校名称：{{name}}</h1>
	<h1>学校地址：{{address}}</h1>
	<student></student>
	</div>
	`,
	data() {
	return {
	name: "lin",
	address: "江西"
	}
	},
	components: {
	student
	}
	});
	const hello = {
	template: `<div>
	<span>{{msg}}</span>
	</div>`,
	data() {
	return {
	msg: "你好",
	}
	}
	}

	const app = Vue.extend({
	template: `
	<div>
	<hello></hello>
	<school></school>
	</div>
	`,
	components: {
	hello,
	school
	}
	})


	new Vue({
	template: `<app></app>`,
	el: "#root",
	components: {
	app
	}
	})
	</script>
	</body>