VUE组件

发布时间:2024年01月10日

VUE组件

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

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

  1. 定义组件

    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)
            },
    
        })
    
  2. 注册组件

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

    案例:

        const vm = new Vue({
            data() {
                return {}
            },
            methods: {},
            components: {
                school
            }
        });
    
  3. 使用组件

    <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

文章来源:https://blog.csdn.net/2302_78070106/article/details/135487507
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。