【day 06】vue的组件

于 2023-05-26 11:03:14 发布
阅读量1.1k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_57858263/article/details/130773911
版权
组件

组件就是把一个网页分割成独立的小的模块，然后通过把模块进行组合，构建成一个大型的应用
在这里插入图片描述

单文件组件 只有一个组件 html css js 都在这个文件内
非单文件组件 可有多个组件
全局注册
!! 得先注册子组件 再生成 vm实例对象 
创建子组件  
const child = Vue.extend({
      //除了 el 其他任意配置项都可以用  
      name: 'child',
      data() {
        return {
          msg: 123
        }
      },
      // 写组件的html内容 
      template: `<h1>我是child子组件</h1>`
    })

//全局注册子组件  自定义组件名  组件对象  
    Vue.component('child', child)

    const vm = new Vue({
      name: 'app',
      el: '#app',
      data() {
        return {}
      }
    })

语法糖的写法 省略 Vue.extend() 在使用 child组件时 内部会自己调用

const child = {
      name: 'child',
      data() {
        return {
          msg: 123
        }
      },
      // 写组件的html内容 
      template: `<h1>我是child子组件</h1>`
    }
   Vue.component('child', child)


view model  vm new Vue() 产生的  老大哥 管理一切 小弟 

子组件实例对象  简称 vc  

<!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>
    <style>
     
    </style>
</head>
<body>
    <div id="app">
            <child></child>
            <child></child>
            <child></child>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>

    //    得先注册子组件  再生成vm实例对象
    // 创建子组件
       const child = Vue.extend({
        // 除了el其他任意配置项都可以用
        name:'child',
        data(){
            return{
                msg:123
            }
        },
        //写组件的html内容
        template:`<h1>我是child子组件</h1>`

       })
    //    全局注册子组件  自定义组件名  组件对象
       Vue.component('child',child)
       const vm = new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
          

           }
        
       })
       console.log(vm)
   </script>
</body>
</html>

注意：子组件内 data 只能是函数 不能是对象的写法

全局注册组件 任意的组件内都可以使用此组件
我们期望 组件直供 某一个组件使用 需要使用局部注册
  new Vue({
           el:"#box",
           data(){
               return{
                
               }
           },
           methods: {


           },
           components:{
             child
           }
        
       })

<!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>
    <style>
     
    </style>
</head>
<body>
    <div id="app">
    <child></child>
    </div>
    <div id="box">
        <p>我现在是在box下</p>
        <child></child>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
    const child = Vue.extend({
        name:'Child'
        data(){
            return{

            }
        },
        methods:{

        },
        template:`<h1>我是儿子组件<h1>`
    })
    // Vue.component('child',child) 关闭全局注册

       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
          

           }
        
       })
       
       new Vue({
           el:"#box",
           data(){
               return{
                
               }
           },
           methods: {


           },
           components:{
             child
           }
        
       })

   </script>
</body>
</html>

最好是配置上name属性 name写的是啥 浏览器工具内 组件的位置就显示啥 最好是 组件名 保持一致 首字母大写

name:'child'
自定义标签名命名
  1. 不能跟已有的标签发生冲突
  2. 子组件命名 使用时 写成
    vue2 非单文件组件为：
    components:{
    childDemo:child
    }
    会被转为 小写识别 就会报错 childdemo
    我们需要更换成 这种写法
模板的规定

vue2内
template内 只能接收一个根元素

template:
`
//这样子写会报错

我是儿子组件


我是儿子组件/

        `
  需要改成

template:
<div> <h2>我是儿子组件</h2> <h2>我是儿子组件</h2> </div>
vue3内不存在这个问题 可以接收多个根元素

<!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>
    <style>
     
    </style>
</head>
<body>
    <div id="app">
    <!-- <child></child> -->
    </div>
    <div id="box">
        <p>我现在是在box下</p>
        <child-demo></child-demo>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
    const child = Vue.extend({
        name:'child',
        data(){
            return{

            }
        },
        methods:{

        },
        template:
        ` <div>
         <h2>我是儿子组件</h2>
         <h2>我是儿子组件</h2>   
        </div> `
    })
    // Vue.component('child',child) 关闭全局注册

       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
          

           }
        
       })
       
       new Vue({
           el:"#box",
           data(){
               return{
                
               }
           },
           methods: {


           },
           components:{
             childDemo:child
           }
        
       })

   </script>
</body>
</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>
    <style>
     
    </style>
</head>
<body>
    <div id="app">
    <child></child>
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
    const  moLeft =  {
        name:'MoLeft',
        template:`<h2 style='float:left;background:red;'>我是左边的组件</h2>`
    }
    const child = Vue.extend({
        name:'child',
        data(){
            return{

            }
        },
        methods:{

        },
        template:
        ` 
        <div>
         <h1>我是儿子组件</h1>
         <mo-left>  </mo-left>
         </div>  
        `
    })
    Vue.component('child',child) 
    Vue.component('moLeft',moLeft) 
    new Vue({
           el:"#app",
           data(){
               return{
                
               }
           },
           methods: {


           },
           components:{
             childDemo:child
           }
        
       })

   </script>
</body>
</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>
    <style>
     
    </style>
</head>
<body>
    <div id="app">
    <child></child>
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
    const  moLeft =  {
        name:'MoLeft',
        template:`<h2 style='float:left;background:red;'>我是左边的组件</h2>`
    }
    const child = Vue.extend({
        name:'child',
        data(){
            return{

            }
        },
        methods:{

        },
        template:
        ` 
        <div>
         <h1>我是儿子组件</h1>
         <mo-left>  </mo-left>
         </div>  
        `
        ,
        components:{
           moLeft
        }
    })
    Vue.component('child',child) 
   // Vue.component('moLeft',moLeft) 
    new Vue({
           el:"#app",
           data(){
               return{
                
               }
           },
           methods: {


           },
           components:{
             childDemo:child
           }
        
       })

   </script>
</body>
</html>

分析：
new Vue 产生的是 vm实例对象
Vue.extend() 返回的是 f VueComponent(options) //构造函数
{
this.inint(options)
}

VueComponent 构造函数 组件使用的时候 内部会执行 产出 vc实例对象 （被vm管理的小弟）

vc和vm两个人 配置差不多完全一致
子组件内 this 指向 自己的vc实例对象

单文件组件
<template>
    <div class="father">
        我是父组件
    </div>
</template>

<script>
export default{
    name:"Father",
    data(){
        return{};
    },
};
// export default{} 默认暴露  引用时 import ??? from '????'

// 分别暴露
// export const obj = {};引用时 import {obj} from '?????'
// 等价于暴露出去了
// {
//     obj
// }

// 统一暴露
// let obj = {}
// let obj1 = {}
// import {obj,obj1} from '?????'

</script>
<style lang="sass" scoped></style>

脚手架

Vue官方提供的标准化开发工具（开发平台）
可以把vue文件及相关的ess编译为可执行的html css js

安装

npm i -g @vue/cli 进行安装

搭建
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值