18_组件

最新推荐文章于 2023-12-21 16:46:46 发布

xixihaha_coder

最新推荐文章于 2023-12-21 16:46:46 发布

阅读量219

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/xixihaha_coder/article/details/123176038

版权

Vue 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

18_组件

组件的定义

在这里插入图片描述

非单文件组件（不推荐）

一个文件中包含有n个组件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
<!-- 
    全局注册:靠Vue.component('组件名",组件)
 -->
  <body>
    <div id="root">
      <h2>{{msg}}</h2>
      <hr />
      <!-- 第三步 ：编写组件标签 -->
      <xuexiao> </xuexiao>
      <hr />
      <student> </student>
    </div>
    <div id="root2">
        <student> </student>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;
    //第一步:创建school组件
    const school = Vue.extend({
      // el: "#root", //不能写死 它可以为任何容器服务
      template: `
      <div>
        <h2>学校名称:{{schoolName}}</h2>
        <h2>学校地址: {{address}}</h2>
        <button @click="showName">点我提示学校名</button>
      </div>
      `,
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京",
        };
      },
      methods:{
        showName(){
            alert(this.schoolName)
        }
      }
    });
    //创建student组件
    const student = Vue.extend({
      template: `
      <div>
        <h2>学生姓名:{{studentName}}</h2>
        <h2>学生年龄:{{age}}</h2>
      </div>
      `,
      data() {
        return {
          studentName: "张三",
          age: 18,
        };
      },
    });
    
    //全局注册
    Vue.component('student',student)
    
    //创建vm
    new Vue({
      el: "#root",
      data: { msg: "你好哇" },
      //第二步:注册组件(局部注册)
      components: {
        xuexiao:school,
        student,
      },
    });


    new Vue({
        el: "#root2",
    })
  </script>
</html>

几个注意点

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

组件的嵌套

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <app></app>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    //创建student组件  
    const student = Vue.extend({
      template: `
      <div>
        <h2>学生姓名:{{studentName}}</h2>
        <h2>学生年龄:{{age}}</h2>
      </div>
      `,
      data() {
        return {
          studentName: "张三",
          age: 18,
        };
      },
    });

    //创建school组件
    const school = Vue.extend({
      template: `
      <div>
        <h2>学校名称:{{schoolName}}</h2>
        <h2>学校地址: {{address}}</h2>
        <student></student>
      </div>
      `,
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京",
        };
      },
      components: {
          //注意创建顺序student要比school先创建
        student,
      },
    });
    //创建app组件
    const app = Vue.extend({
      template: `
      <div>
        <school></school>
      </div>
      `,
      data() {
        return {
          studentName: "张三",
          age: 18,
        };
      },
      components: {
        school,
      },
    });

    //创建vm
    new Vue({
      el: "#root",
      components: {
        app,
      },
    });
  </script>
</html>

关于VueComponent

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

	5.VueComponent的实例对象，以后简称vc（也可称之为:组件实例对象）。
vue的实例对象,以后简称vm.

1.一个重要的内置关系:VueComponent.prototype.proto === Vue. prototype

2.为什么要有这个关系:让组件实例对象(vc）可以访问到 Vue原型上的属性、方法。

单文件组件 (常用)

一个文件中只包含有1个组件。

School.vue

<template>
   <div class="demo">
       <h2>学校名称:{{schoolName}}</h2>
        <h2>学校地址: {{address}}</h2>
   </div>
</template>

<script>
  export default{
      name:'School', //变量 一般和文件名一样
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京",
        };
      },
      methods:{
        showName(){
            alert(this.schoolName)
        }
      }
    };
   
</script>


<style>
    .demo{
        background-color: orange;
    }
</style>

Stduent.vue

<template>
   <div>
       <h2>学生名称:{{name}}</h2>
        <h2>学生年龄: {{age}}</h2>
   </div>
</template>

<script>
  export default{
      name:'Student', //变量 一般和文件名一样
      data() {
        return {
          name: "张三",
          age: 18,
        };
      }
    };
   
</script>


<style>
  
</style>

App.vue

<template>
    <div>
        <School ></School>
        <Student></Student>
    </div>
</template>

<script>
//引入组件
import School from './School'
import School from './School.vue';
import Student from './Student'
export default {
    name:'App',
    components:{
        School,
        Student
    }
};
</script>

<style></style>

main.js

import App from './App.vue'
new Vue({
    el:'#root',
    compents:{
        App
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <App></App>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</body>
</html>

运行html是不出来效果的要放到脚手架里,但是格式是这样

xixihaha_coder

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
18_组件

18_组件组件的定义非单文件组件（不推荐）一个文件中包含有n个组件。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-
复制链接

扫一扫