1、vue 笔记之 组件

时间:2021-12-18 02:08:24

1、组件个人理解:

 <组件>是页面的一部分,将界面切分成部分,每部分称为 <组件>
 

2、组件化思想:

         //2.1、定义一个全局的组件,组件支持‘驼峰命名’规则
    Vue.component("TodoItem",{
props: ['content'], //接收父组件传递过来的数据
template: "<li>{{content}}</li>"
}) 循环遍历 list , 每一次遍历都把值给 item , item 再通过 v-bind 把值传递给 content ,
compoent 通过 props 获取传递过来的数据。 list 决定输出多少个 todo-item 组件 <ul>
<todo-item v-for="item in list" v-bind:content="item">
</todo-item>
</ul>
   //2.2、局部组件
局部组建的使用,需要注册到 vue 父组件模版中
var TodoItem = {
props:['content'],
template:"<li>{{content}}</li>"
} var app = new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:[],
inputValue:''
},
methods:{
submit:function () {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
});
 
  //2.3、父组件向子组件传值
    <todo-item v-for="item in list" v-bind:key="item"></todo-item>
    通过 v-bind 即可实现父组件向子组件传值,子组件只需要通过 props:['key'] 即可获取父组件传递的数据
 
      //2.4、子组件向父组件传值
 
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn; var TodoItem = {
props:['content','index'],
template:"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick: function(){
this.$emit("delete",this.index);//触发父组件 delete 绑定事件,index:为参数
}
}
} var app = new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:[],
inputValue:''
},
methods:{ }
});
 

1、vue 笔记之 组件的更多相关文章

  1. vue笔记 递归组件的使用

    递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...

  2. vue笔记三&lpar;组件&rpar;

    十.组件 1.组件中的data为函数 2.props: 父组件向子组件传递数据 子组件:Child.vue <template> <span>{{ myMsg }}</s ...

  3. Vue&colon;实践学习笔记&lpar;3&rpar;——组件使用

    Vue:实践学习笔记(3)——组件使用 全局注册 1.注册组件 Vue.component('my-component',{ //选项 }) 说明:my-component就是注册的组件自定义的标签名 ...

  4. vue学习笔记&lpar;八&rpar;组件校验&amp&semi;通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  5. Vue学习计划基础笔记&lpar;六&rpar; - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

  6. Vue 学习笔记之 —— 组件(踩了个坑)

    最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head&gt ...

  7. Vue笔记(有点乱)

    Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...

  8. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  9. Vue&period;js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

随机推荐

  1. STM32F103之DMA

    一.背景: 需要使用STM32的DAC,例程代码中用了DMA,对DMA之前没有实际操作过,也很早就想知道DMA到底是什么,因此,看了一下午手册,代码和网上的资料,便有了此篇文章,做个记录. 二.正文: ...

  2. C语言计算程序运行时间

    #include<stdio.h>#include<stdlib.h> #include "time.h" int main( void )  {     ...

  3. SRM 410&lpar;1-250pt&comma; 1-500pt&rpar;

    DIV1 250pt 题意:对于图G,有一些点和边,点中有一些点称为特殊点.问在所有特殊点最终不能处于同一个联通块的条件下,最多能给在图G中添加多少条边. 解法:首先,对于图G,处理出它有哪些联通块, ...

  4. E&equals;MC2 - 搜搜百科

    E=MC2 - 搜搜百科 1 E=MC2 质能等价理论是爱因斯坦狭义相对论的最重要的推论,即著名的方程式E=mC^2,式中E为能量,m为质量,C为光速:也就是说,一切物质都潜藏着质量乘于光速平方的能量 ...

  5. gets、scanf和getchar之间的区别

    gets gets.scanf和getchar之间的区别 1. gets函数读取数据时,接受的数据包括数据和回车符.即:读取数据后输入流没有输入 操作动作. 2. scanf函数读取数据时,接受的数据 ...

  6. CodeForces 689D Friends and Subsequences

    枚举,二分,$RMQ$. 对于一个序列来说,如果固定区间左端点,随着右端点的增大,最大值肯定是非递减的,最小值肯定是非递增的. 因此,根据这种单调性,我们可以枚举区间左端点$L$,二分找到第一个位置$ ...

  7. 剑指offer 08:跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). public class Solution { public int ...

  8. ionic3 极光推送

    参考网站:http://www.jianshu.com/p/eb8ab29329d9 遇到的问题是  执行以下命令一直报错 cordova plugin add https://github.com/ ...

  9. 【Java】类加载过程

    JVM把class文件加载到内存,并对数据进行校验.解析和初始化,最终形成JVM可以直接使用的Java类型的过程. 类加载的过程主要分为三个部分: 加载 链接 初始化 而链接又可以细分为三个小部分: ...

  10. node day1 login

    https://blog.csdn.net/weixin_33901641/article/details/85967847 vue之node.js的简单介绍 http://nodejs.cn/ ht ...