Vue学习----第三天_组件化开发【6.3】

最新推荐文章于 2024-08-14 20:51:47 发布
最新推荐文章于 2024-08-14 20:51:47 发布
阅读量453 收藏 2
点赞数
分类专栏： Vue 文章标签： vue vue.js web 无监督学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43848802/article/details/106497264
版权
一、认识组件化
1、什么是组件化

在这里插入图片描述

2.Vue组件化思想

在这里插入图片描述

二、注册组件
1.注册组件的基本步骤

在这里插入图片描述
代码如下：

<div id='app'>
    <my-cpn></my-cpn>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    // 1.创建组件构造器对象
    const cpnC = Vue.extend({
      // 字符串语法 tab键上面
      template: `
      <div>
        <h2>标题</h2>
        <p>内容</p>
        <p>结尾</p>
      </div>
      `
    })
    // 2.注册组件
    Vue.component('my-cpn', cpnC)

    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      }
    })
  </script>

效果如下：
在这里插入图片描述

2.注册组件步骤解析

在这里插入图片描述
在这里插入图片描述

三、组件其他补充
1.全局组件和局部组件

在这里插入图片描述
代码如下：

<div id='app'>
    <my-cpn></my-cpn>
    <my-all></my-all>
  </div>

  <script src='./js/vue.js'></script>
  <script>

    const cpn = Vue.extend({
      template: `
      <div>
        <h2>头部</h2>
        <h2>尾部</h2>
      </div>
      `
    })
    // 1.全局组件：意味着可以在多个Vue的实例下面使用
    Vue.component('my-cpn', cpn)

    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      // 2.局部注册组件
      components: {
        'my-all': cpn
      }
    })
  </script>

效果如下：
在这里插入图片描述

2.父组件和子组件

在这里插入图片描述
代码如下：

  <div id='app'>
    <!-- <cpn1></cpn1> -->
    <cpn2></cpn2>
  </div>

  <script src='./js/vue.js'></script>
  <script>

    // 1.创建第一个组件 子组件
    const cpnc1 = Vue.extend({
      template: `
      <div>
        <h2>标题</h2>
        <h2>内容</h2>
      </div>
      `
    })
    // 2.创建第二个组件 父组件
    const cpnc2 = Vue.extend({
      template: `
      <div>
        <h2>标题2</h2>
        <h2>内容2</h2>
        <cpn1></cpn1>
      </div>
      `,
      components: {
        cpn1: cpnc1
      }
    })

    // root组件
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      components: {
        cpn2: cpnc2,
      }
    })
  </script>

效果如下：
在这里插入图片描述

3.注册组件语法糖

在这里插入图片描述
代码如下：

  <div id='app'>
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    // 1.全局组件注册的语法糖
    Vue.component('cpn1', {
      template: `
      <div>
        <h2>标题</h2>
        <h2>内容</h2>
      </div>
      `
    })

    // 2.局部组件注册的语法糖
    const cpn2 = {
      template: `
      <div>
        <h2>标题2</h2>
        <h2>内容2</h2>
      </div>
      `
    }

    const app = new Vue({
      el: '#app',
      data: {},
      components: {
        'cpn2': cpn2
      }
    })
  </script>

效果如下：
在这里插入图片描述

4.模板分离写法

在这里插入图片描述
代码如下：

  <div id='app'>
    <cpn></cpn>
    <cpn2></cpn2>
  </div>

  <!-- 1.通过script标签，注意：类型必须为text/x-template -->
  <script type="text/x-template" id="cpn">
    <div>
      <h2>标题</h2>
      <p>内容</p>
    </div>
  </script>

  <!-- 2.template标签 -->
  <template id="cpn2">
    <div>
      <h2>标题cpn2</h2>
      <p>内容cpn2</p>
    </div>
  </template>

  <script src='./js/vue.js'></script>
  <script>
    // 注册全局组件
    Vue.component('cpn', {
      template: '#cpn'
    })
    Vue.component('cpn2', {
      template: '#cpn2'
    })

    const app = new Vue({
      el: '#app'
    })
  </script>

效果如下：
在这里插入图片描述

四、组件数据存放
1.组件可以访问Vue实例数据吗？

在这里插入图片描述

2.组件数据存放

在这里插入图片描述

3.为什么组件中data是一个函数？

在这里插入图片描述

五、父子组件的通信
1.父子组件的通信

在这里插入图片描述

2.父向子传递数据—props
  1. props基本用法
    在这里插入图片描述代码如下：
  <div id='app'>
    <children :movies="movies" :message="message"></children>
  </div>

  <template id="children">
    <div>
      <ul>
        <li :key="index" v-for="(item, index) in movies">{{item}}</li>
      </ul>
      <h2>{{message}}</h2>
    </div>
  </template>
  <script src='./js/vue.js'></script>
  <script>
    // 父传子  props
    const children = {
      props: ['movies', 'message'],
      template: '#children'
    }

    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        movies: ['大娃', '二娃', '三娃', '四娃']
      },
      components: {
        children
      }
    })
  </script>
  1. props数据验证
    在这里插入图片描述
    代码如下：
const children = {
  template: '#children',
  // props: ['movies', 'message'],
  props: {
    // 1.类型限制
    // movies: Array,
    // message: String

    // 2.提供一些默认值,没传入时显示
    message: {
      type: String,
      default: 'aaaa',
      // 表示使用时，必须传值，否则报错
      required: true
    },
    movies: {
      type: Array,
      // 类型是对象或者数组时，默认值必须是一个函数
      // 以下两种写法都可以，但是 直接default：[]对vue版本支持不同
      // default: [],
      default() {
        return []
      },
      // 表示使用时，必须传值，否则报错
      required: true
    }
  }
}
  1. props中驼峰标识
    总结：在Vue实例data中定义的数据名若为驼峰命名，则在数据绑定时改为以横线分割的字符串：
    如infoMessage →info-message
    代码图片如下：着重看红色框框中的代码
    在这里插入图片描述
3.子向父传递数据—自定义事件

在这里插入图片描述
在这里插入图片描述
效果如下：
在这里插入图片描述

六、父子组件的访问
1.父子组件的访问方式：$children

在这里插入图片描述
代码如下：

  <div id='app'>
    <cpn ref="aaa"></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <button @click="btnClick">按钮</button>
  </div>

  <template id="cpn">
    <div>
      我是子组件
    </div>
  </template>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      methods: {
        btnClick() {
          // 1.通过children方式
          console.log(this.$children[0].showMessage)
          console.log(this.$children[0].name)
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: '子组件的name'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage')
            }
          }
        }
      }
    })
  </script>
2.父子组件的访问方式：$refs ★★★★★

在这里插入图片描述
代码如下：

  <div id='app'>
    <cpn ref="aaa"></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <button @click="btnClick">按钮</button>
  </div>

  <template id="cpn">
    <div>
      我是子组件
    </div>
  </template>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      methods: {
        btnClick() {
          // 2.通过$refs方式★★★
          // 需要在自定义组件中加上 ref 属性
          console.log(this.$refs.aaa.name)
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: '子组件的name'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage')
            }
          }
        }
      }
    })
  </script>
3.子访问父-访问方式：$parent或 $root

$parent：用来访问父组件
$root：用来访问根组件
在这里插入图片描述
代码如下:

  <div id='app'>
    <h2>子组件</h2>
    <cpn></cpn>
  </div>

  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <ccpn></ccpn>
    </div>
  </template>

  <!-- 孙组件 -->
  <template id="ccpn">
    <div>
      <h2>我是子-孙组件</h2>
      <button @click="btnClick">按钮</button>
    </div>
  </template>

  <script src='./js/vue.js'></script>
  <script>
    // 根组件
    const app = new Vue({
      el: '#app',
      data: {
        message: '根组件'
      },
      // 子组件
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: '子组件'
            }
          },
          // 孙组件
          components: {
            ccpn: {
              template: '#ccpn',
              methods: {
                btnClick() {
                  // 1.子访问父$parent
                  console.log(this.$parent)
                  console.log(this.$parent.name)

                  // 2.访问根组件$root
                  console.log(this.$root.message)
                }
              },
            }
          }
        }
      }
    })
  </script>

效果如下：
在这里插入图片描述

4.非父子组件传值

在这里插入图片描述
代码如下：

  <div id="app">
    <test-tom></test-tom>
    <test-joy></test-joy>
    <button @click='handle'>销毁事件</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 提供事件中心
    var hub = new Vue();
    Vue.component('test-tom', {
      data: function () {
        return {
          num: 0
        }
      },
      template: `
        <div>
            <div>tom：{{num}}</div>
            <button @click='handle'>点击</button>
        </div>
      `,
      methods: {
        handle: function () {
          // 触发兄弟组件的事件
          hub.$emit('joy-event', 2);
        }
      },
      mounted: function () {
        //监听事件，钩子函数
        hub.$on('tom-event', (val) => {
          // val是兄弟组件传递过来的
          this.num += val;
        });
      }
    })
    Vue.component('test-joy', {
      data: function () {
        return {
          num: 0
        }
      },
      template: `
        <div>
            <div>joy：{{num}}</div>
            <button @click='handle'>点击</button>
        </div>
      `,
      methods: {
        handle: function () {
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function () {
        //监听事件，钩子函数
        hub.$on('joy-event', (val) => {
          // val是兄弟组件传递过来的
          this.num += val;
        });
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        handle: function () {
          hub.$off('tom-event');
          hub.$off('joy-event');
        }
      }
    })
  </script>
七、插槽slot
1.为什么使用slot

在这里插入图片描述

2.如何封装这类组件

在这里插入图片描述

3.slot基本使用

在这里插入图片描述
代码如下：

  <!-- 1.插槽基本使用，定义slot标签 -->
  <!-- 2.插槽默认值，slot标签内的内容 -->
  <!-- 3.多个值，同时放入组件中进行替换，一起作为替换元素 -->
  <div id='app'>
    <cpn><button>按钮</button></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>我是组件</h2>
      <p>我是组件，哈哈哈</p>
      <!-- 如果组件没有内容，默认显示 -->
      <slot><button>默认按钮</button></slot>
    </div>
  </template>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      components: {
        cpn: {
          template: '#cpn'
        }
      }
    })
  </script>

效果如下：
在这里插入图片描述

4.具名插槽slot

在这里插入图片描述
代码如下：

  <div id='app'>
    <cpn><span slot="center">标题</span></cpn>
    <cpn><button slot="left">返回</button></cpn>
  </div>

  <template id="cpn">
    <div>
      <slot name="left"><span>左边</span></slot>
      <slot name="center"><span>中间</span></slot>
      <slot name="right"><span>右边</span></slot>
    </div>
  </template>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      components: {
        cpn: {
          template: '#cpn'
        }
      }
    })
  </script>

效果如下：
在这里插入图片描述

5.编译作用域

在这里插入图片描述
代码如下：

  <div id='app'>
    <cpn v-show="isShow"></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
      <p>我是内容</p>
      <button v-show="isShow"></button>
    </div>
  </template>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        isShow: true
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              isShow: false
            }
          }
        }
      }
    })
  </script>

效果如下：
在这里插入图片描述

6.作用域插槽：准备

在这里插入图片描述

7.作用域插槽：使用

在这里插入图片描述
代码如下：

  <div id='app'>
    <cpn></cpn>
    <cpn>
      <!-- 目的是获取子组件中的数据 -->
      <template slot-scope="slot">
        <!-- <span v-for="item in slot.data">{{item}}、</span> -->
        <span>{{slot.data.join('、')}}</span>
      </template>
    </cpn>
  </div>

  <template id="cpn">
    <div>
      <slot :data='pLanguages'>
        <ul>
          <li v-for="item in pLanguages">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              pLanguages: ['JavaScript', 'c++', 'python', 'Go', 'Java', 'c#']
            }
          }
        }
      }
    })
  </script>

效果如下：
在这里插入图片描述

内容持续更新中…
lvan学习笔记-文章内容仅个人观点
2020.6.3

lvan-ah
关注
专栏目录
测试--总结
Redjoker1208的博客
08-02 417
4、以下代码打印结果为: （C） <div id="app"> {{ message.split('').reverse().join('') }} </div> <script> new Vue({ el: '#app', data: { message: 'hello' } }) </script> A、hello B、hel C、olleh D、llo 6、创建子组件的正确方式 （C） A、 Vue.component('cz',{ ​
Vue组件的基本使用
Jimmy Huang's Blog
05-17 347
1、组件的使用 注册一个组件 Vue.component('my-component-name', { /* ... */ }) 调用 <div id="app"> <my-component-name></my-component-name> <my-component-name></my-component-name> <my-component-name></my-component
web layui 单选框下拉的实例
liuyinfei_java的博客
03-11 1309
layui 单选下拉框select根据后台数据显示下拉框 <div class="layui-form-item"> <label class="layui-form-label">群组类别</label> <div class="layui-input-block"> <select name="groupType" id="groupType" lay-verify="required"> ...
Vue.js——60分钟组件快速入门（下篇）
dengjie0448的博客
07-03 583
概述 上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。” 今天我们将着重介绍slot和父子组件之间的访问和通信，slot是一个非常有用的东西，它相当于一个内容插槽，它是我们重用组件的基础。Vue的事件系统独立...
uni-app加持下的Vue开发：效率与功能的双赢
程序边界
06-11 5561
Vue.js是一个用于构建用户界面的渐进式框架。它的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有项目整合。Vue.js采用自底向上增量开发的设计，提供了响应式数据绑定和组合的视图组件。通过简单的API实现响应的数据绑定和组合的视图组件，可以快速构建出功能丰富、界面美观的应用。uni-app是一个使用Vue.js开发所有前端应用的框架，它可以编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
Vue-学习笔记-09 深入组件化开发与组件通信
欢迎访问我的主页：https://www.bookbook.cc
07-28 8343
文章目录一、什么是组件？二、Vue中的组件?三、注册组件的基本步骤3.1 知识储备3.2 第一种方式使用全局组件(coderwhy)3.3 第二种方式使用全局组件(MrLiuQuan)3.4 局部组件3.5 父组件和子组件 一、什么是组件？ 在看组件之前，我们先来看这样一个问题，人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 但是，我们人有一种天生的能力，就是将问题进行拆解。 如果将一个复杂的问题，拆分成很多个可以
Vue-Router4 学习笔记
zep
03-04 885
一、URL的hash 前端路由是如何做到URL和内容进行映射呢？监听URL的改变。 URL的hash也就是锚点(#), 本质上是改变window.location的href属性； 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新； hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。 二、HTML5的History 三、认识vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.j
《Vue入门到精通系列之二》--- 组件化开发与前端模块化
热门推荐
白大锅的博客，毕设WangLoveBai_999
03-04 1万+
最全、最详细Vue入门到精通系列文章，持续更新中
Vue 2.0-＞3.0学习笔记（第一章 Vue核心）
最新发布
PNPYY的博客
08-14 858
【代码】Vue 2.0-＞3.0学习笔记(B站尚硅谷)
《Vue入门到精通系列之二》--- 组件化开发与前端模块化(2)
2401_84097774的博客
04-20 723
首先，如果不是一个函数，Vue直接就会报错。其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响6.父子组件通信。
Vue学习-1-入门
baidu_38126306的博客
11-03 525
Vue 狂神说 1. 概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层View，方便与第三方或既有项目整合； 遵循SoC原则关注点分离原则； HTML + CSS + JS ：视图，给用户看，刷新后台给的数据； 网络通信：Axios； 页面跳转：Vue-router 状态管理：Vuex Vue-UI：ICE，Element U
Vue学习----第三天_webpack（学习webpack看这一篇就够了1.8w字）【6.7】
weixin_43848802的博客
06-07 4641
一、认识webpack 官方网址：https://www.webpackjs.com/ 1.什么是webpack webpack是一个前端模块化打包工具 2.前端模块化 3.和grunt/gulp打包工具的对比 grunt/gulp更强调的是自动化、定义一些任务 webpack更强调模块化 二、webpack安装 1.webpack安装 webpack为了正常运行，必须依赖node环境 node环境为了正常执行代码，必须依赖其包含的各种依赖的包 npm(node packages manager)包管
Vue学习----第七天_Vuex（详细梳理）【6.13】
weixin_43848802的博客
06-13 1448
目录一、认识Vuex1.Vuex是做什么的？2.Vuex管理什么状态①使用Vuex统一管理状态的好处 一、认识Vuex 1.Vuex是做什么的？ Vuex是实现组件全局转态（数据）管理的一种机制，可以方便的实现组件之间数据的共享 2.Vuex管理什么状态 一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件中的私有数据，依旧存储在组件自身的data中即可 ①使用Vuex统一管理状态的好处 能够在Vuex中集中管理共享的数据，易于开发和后期维护 能够高效的实现组件之间的数据共享，提高开
Vue学习----第五天_Vue-Router（初步了解vue路由）【6.10】
weixin_43848802的博客
06-10 1153
目录一、认识路由1、什么是路由2、什么前端渲染和后端渲染3、后端路由阶段4、前端路由阶段二、前端路由的规则1、URL的hash2、HTML5的history模式01.HTML5的history模式：pushState02.HTML5的history模式：replaceState03.HTML5的history模式：go三、Vue-router基础 一、认识路由 1、什么是路由 2、什么前端渲染和后端渲染 3、后端路由阶段 4、前端路由阶段 二、前端路由的规则 实现，路径改变，页面不刷新 1、UR
Vue学习----第四天_Vue cli(脚手架)【6.8】
weixin_43848802的博客
06-08 721
目录一、Vue CLI1.什么是Vue CLI2.Vue CLI使用前提 node3.Vue CLI使用前提 webpack3.Vue CLI使用前提 webpack二、Vue CLI21.Vue CLI2详解2.目录结构向详解 一、Vue CLI 1.什么是Vue CLI 2.Vue CLI使用前提 node 3.Vue CLI使用前提 webpack 可查看上一篇内容Vue学习----第三天_webpack（学习webpack看这一篇就够了1.8w字）【6.7】 3.Vue CLI使用前提 web
Vue学习----第三天_模块化开发【6.4】
weixin_43848802的博客
06-04 452
一、为什么需要模块化 1.JavaScript原始功能
Vue v-model深度解析与组件自定义实现
“本文深入探讨了Vue.js中的v-model原理以及如何在组件中自定义v-model，提供了一个简单的实例来帮助理解这一功能。” Vue.js中的v-model是其核心特性之一，它允许开发者实现视图和模型之间的双向数据绑定。这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值