Vue.js 组件笔记

Vue 组件总结笔记

一、 创建组件

1. 使用组件三部曲 ( 创建, 注册, 使用 )

2. 全局组件:Vue.component(‘tag‘, {});

3. 局部组件: components 属性进行注册

二、注册组件的方式

方式一:全局注册

// 可以在任何实例下使用Vue.component(‘my-component‘, {
    template: ‘#mycomponent‘,
})

方式二:局部注册

// 局部注册,只能在 #app 下面使用
new Vue({
   el: ‘#app‘,
   components: {
        ‘child-component‘: {
             template: ‘#child-component‘
     }
   }
})

三、 创建组件的标签

   可以使用 template 或者 script 标签

四、定义组件时 data 和 el 必须使用函数

五、组件实例作用域是孤立的,不能在子组件内直接引用父组件的数据,可用使用 props 把数据传给子组件。

六、在父组件中使用子组件,通过以下语法将数据传递给子组件

<my-component v-bind:子组件props = "父组件属性"></my-component>

七、props 有三种绑定类型

1. 单项绑定: (vue 默认绑定) 修改父组件的数据会影响子组件数据,修改子组件数据不会影响父组件数据。

2. 双向绑定: sync 修改父组件影响子组件数据,修改子组件数据影响父组件。

3. 单次绑定: once 个人顾各人,父组件修改不影响子,子修改不影响父。

八、slot 内容插槽

时间: 2024-10-22 01:19:33

Vue.js 组件笔记的相关文章

Vue.js学习笔记(7)组件详解

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js学习笔记(5)tabs组件和Tree升级版(实现省市多级联动) 先给大家看下小颖写了一个简单的组件示例: 组件: <template> <div class='content' v-if='showFlag'> <input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='m

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

vue.js 组件之间如何实现数据传递?

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文和大家分享的就是vue.js  组件之间传递数据相关内容,一起来看看吧,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册

如何理解vue.js组件的作用域是独立的

vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内data数据,如果要用父组件的必须用props传递:3.子组件标签的数据,使用父组件内的data数据 案例代码: <div id="demo"> <my-component v-if="show" v-bind:my-message="messa

如何对第一个Vue.js组件进行单元测试 (上)

首先,为什么要单元测试组件? 单元测试是持续集成的关键.通过专注于小的.独立的实体,确保单元测试始终按预期运行,使代码更加可靠,你可以放心地迭代你的项目而不必担坏事儿. 单元测试不仅限于脚本.可以独立测试的任何东西都是可单元测试的,只要你遵循一些好的做法.这些实例包括单一责任.可预测性和松散耦合. 作为我们应用程序的可重用实体,Vue.js组件是单元测试的理想选择.我们将用不同的输入和交互测试做好的单个单元,并确保它始终按照我们的预期运行. 在开始之前 Vue CLI 3发布了.Vue Test

Vue.js 组件精讲

课程介绍:你会学到什么        了解 Vue.js 组件开发的精华        Vue.js 组件知识全覆盖        掌握多种 Vue.js 组件开发的模式        独立组件不依赖 Vuex 和 Bus 情况下,各种跨级通信手段(provide / inject.broadcast / dispatch.findComponents 系列)        7 个完整的 Vue.js 组件示例        如何做好一个开源项目        Vue.js 容易忽略的 API

vue.js学习笔记(4)— 父子组件之间通信的第一种方式 props 和 $emit

我们知道,vue组件中,父组件把数组传递给子组件的话,通常是使用props传递,而vue规定,prop是只能单向下行传递的,那么子组件要怎么才能实现数据的向上传递呢,这里引述一个概念:"父子组件的关系:prop向下传递,事件向上传递",上一篇文章当中,关于数据向上传递用到的事件方法 $emit() 也进行了详细的说明,不懂的童鞋可以翻回去看一下.下面就是今天要说的父子组件相互通信的问题,点击效果依次如下: 代码如下: <!DOCTYPE html> <html>

vue.js 组件-全局组件和局部组件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <my-component></my-compo

Vue.js学习笔记(1)

数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时 将input 框里面的值清空时: 重新给  input 框输入  豆豆 后页面中  span  里绑定{{testData.name}}的值随着 input 框值的变化而变化. 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定.并且v-model指令只能用于:<input>.<select>.<textarea>这三种标签. <template> <div&