Vue基础——组件所需了解的基础知识

组件:把页面中多个重复的标签结构(html/css/js)封装起来
组件特点:

  1. 组件体现封装思想(html/css/js)
  2. 组件是特殊的Vue实例(data,methods等选项)
    2.1.组件可以使用Vue选项(没有el)
    2.2.有自己的选项 如template(要求有一个根元素)
  3. data(){return {数据a:值}}
  4. 尽可能使用第三方组件 element-ui / mint-ui / iview等

一、全局组件

三步骤

  1. 定义组件Vue.component(组件名,{选项})
    组件名建议 abc-xyz
  2. {template:` 标签 ` ,data等}
    template必须有一个根节点
    data(){return {数据}}
  3. 在视图中通过组件名使用(自定义标签)
    在后面newVue所管理的视图中使用
  <div id="app">
    <h-p></h-p>
  </div>
  <script>
    Vue.component('h-p',{
      template:`
      <div>
        <h3>我是组件h+p</h3>
        <p>{{num}}</p>
      </div>`,
      data(){
        return{
          num:100
        }
      }
    })
    new Vue({
      el:"#app",
      data:{

      },
      // 局部组件
      components:{
        'abc-xyz':{
          template:`
          <div>
            <h2>组件</h2>
            <p>{{num}}</p>  
          </div>
        `,
        data(){
          return{
            num:100
          }
        }
        
        }
      }

    })
  </script>

二、局部组件

选项 components

  1. 通过选项定义/注册 局部组件 {组件名:{ 选项 }}
  2. 选项 {template 或者 data等}
  3. 使用组件
    template:` `
    data(){return {***}}
  <div id="app">
    <child-a></child-a>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
      },
      // 使用组件
      components:{
        'child-a':{
          template:`
            "<div>我是局部组件---{{count}}</div>"
          `,
          data(){
            return{
              count:10
            }
          }
        }
      }
    })
  </script>

三、组件嵌套

new Vue所管理的视图相当于整个项目的根组件
组件是父组件还是子组件与该组件的使用位置与该组件是全局还是局部组件没有关系

  <div id="app">
    <child-b></child-b>
    <child-a></child-a>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 全局组件
    // child-b
    Vue.component('child-b',{
      template:`<div>我是全局组件child-b</div>`
    }),

    // child-c
    Vue.component('child-c',{
      template:`<div>我是全局组件child-c</div>`
    })

    // 可以把newVue过管理的视图当成是整个项目的根组件
    new Vue({
      el:"#app",
      data:{

      },
      // 局部组件
      components:{
        'child-a':{
          template:`<div>我是局部组件child-a
          	//child-a中的子组件
              <child-c></child-c>
            </div>`
        }
      },
      methods:{

      }
    })

  </script>

四、组件通信

  1. 父子组件之间       父 -> 子 子 -> 父
  2. 兄弟组件之间      组件A - 组件B
  3. 隔代组件之间      爷 -> 父 -> 子

五、父子组件

  1. 父子组件值props
    目的:要在子组件使用数据 a      a的值来源于父组件
    props:字符串数组 -> props : [ ’ a ’ ]
    a、a是组件的属性 <child-a a=? ?>
    b、a的用法和data中的数据用法一样
    c、a的值来源于父组件

props中的值是数据
props中的数据的值来源于父组件
props中的数据a和data中的数据用法一样
此时a 也是组件< child-a>的属性

  <div id="app">
    <!-- 使用v-bindg绑定可变数据 -->
    <child-a :a='msg'></child-a>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.component('child-a',{
      template:`<div>child-a组件----{{a}}</div>`,
      // data(){
      //   return{
      //     name:100
      //   }
      // }
      // 选项props:['a','b']
     
      props:['a']
    })
    new Vue({
      el:"#app",
      data:{
        msg:'32'
      },
      methods:{
        
      }
    })
  </script>
  1. 父子组件传值 - v-bind的使用
    步骤:
    a. 声明数据 props : [ ’ a ’ ]
    b. 使用组件时 < child-a :a=‘msg’>< /child-a>
    c.在子组件的template中{{a}}
  <div id="app">
    <!-- 第二步,在使用组件时,把父组件数据传值给属性b -->
    <child-b :b='b'></child-b>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    
    new Vue({
      el:"#app",
      data:{
        b:'父组件的数据b'
      },
      components:{
        'child-b':{
          // 第三步:在子组件中使用数据a
          template:`<div>局部组件child-b---{{b}}</div>`,
          // 第一步:声明数据
          props:['b']
        }
      },
      methods:{
        
      }
    })
  </script>

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…