VUE组件

apesource-陈安

已于 2024-01-10 17:56:25 修改

阅读量466

点赞数 12

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2024-01-09 18:50:21 首次发布

本文链接：https://blog.csdn.net/2302_78070106/article/details/135487507

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

VUE组件

组件：组件是用来实现局部功能的代码和资源的集合

Vue中使用组件的三个步骤：

定义组件

const 组件名 = Vue.extend({
	template:`
	<div>
	组件代码
	</div>`,
	data(){
		return {
			组件代码赋值
		}
	}，
	mounted(){
		......
	}
})

案例：

    const student = Vue.extend({
        template: `
          <div>
          <h2>学生姓名:{{ studentName }}</h2>
          <h2>学生年龄:{{ age }}</h2>
          </div>`,
        data() {
            return {
                studentName: '张三',
                age: 20
            }
        },
        mounted() {
            console.log(this)
        },

    })

注册组件

const vm = new Vue({
	data(){
		return {}
	},
	methods:{},
	components: {
		要注册地组件名
	}
})；

案例：

    const vm = new Vue({
        data() {
            return {}
        },
        methods: {},
        components: {
            school
        }
    });

使用组件

<div id="root">
    <school></school>
    <student></student>

</div>

组件使用注册的完整案例（包括从组件中注册另一个组件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <school></school>
    <student></student>
</div>
<script src="js/vue2.7.15.js"></script>
<script type="text/javascript">
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名:{{studentName}}</h2>
                <h2>学生年龄:{{age}}</h2>
            </div> `,
        data(){
            return{
                studentName: '张三',
                age: 30
            }
        },
        mounted(){
                console.log(this)
        },
    })
    console.log(student)
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称:{{ schoolName }}</h2>
          <h2>学校地址:{{ address }}</h2>
          <hr/>
          <student></student>
          </div>`,
        data() {
            return {
                schoolName: "猿究院",
                address: '太白南路'
            }
        },
        components: {
            student
        }
    });



    const vm = new Vue({
        data(){
            return{
            }
        },
        methods: {},
        components:{
            school
        }
    });
    vm.$mount("#root")
</script>
</body>
</html>

组件的注意事项：

没有el？

最终所有的组件都要经过vm的管理，由vm中的el来决定在那个容器中展示
组件名

第一种写法：首字母小写

第二种写法：首字母大写

多个单词：kebab-case my-school

CamelCase MySchool
VueComponent：

组件本质是一个VueComponent 的构造函数，并不是我们创建的，是Vue .extend 生成的
组件在使用时Vue解析时会帮我们创建组件的实例对象，new VueComponent({…})，每次调用Vue .extend 都会返回一个全新的 VueComponent
VueComponent .prototype . _ proto _ === Vue .prototype