文档章节

vue组件的基本使用,以及组件之间的基本传值方式

o
 osc_y8yehimr
发布于 2019/03/20 20:46
字数 584
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

组件(页面上的每一个部分都是组件)
1.三部分:结构(template),样式(style),逻辑(script)
2.组件的作用:复用
3.模块包含组件
4.组件创建:
    1.全局组件:Vue.component();
    2.局部组件:components();
        参数1:组件的名称
        参数2:组件的配置项
*组件的配置项:
    1.new Vue这个里面有什么参数,那么组件的配置项中就有什么参数,包含生命周期
    2.组件内部多了一个属性template
    3.组件内部的data不在是一个对象,而是一个函数
组件的使用:
    1.直接将组件的名称当做标签使用即可
    2.组件名称首字母必须大写
5.脚手架的使用
    1.安装:
        3.0 cnpm install @vue/cli -g
        2.9.3 cnpm install vue-cli -g
    2.创建项目
        3.0 vue create <项目名称>
        2.9.3 vue init webpack <项目名称>
6..组件间的传值(组件之间的通讯)
    一.父子通信
    1.父传子
       传递:当子组件在父组件当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据
        接收:在子组件内部通过props进行接收
            接收方式有两种:
                1.一种是数组接收,2.另一种是对象接收
                一般情况下我们都使用对象进行接收,因为对象接收可以校验数据的类型
eg:
props:["val"];
props:{
    val:String//当这个是number的时候,就会有警告
}
    2.子传父
        (1)传递:当子组件给父组件传递数据的时候,通过调用父组件给子组件绑定的自定义事件,然后将传递过去
        接收:父组件通过自定义事件的函数来接收子组件传递过来的数据(注意这个自定义方法的函数在绑定的时候不需要加())
        (2)作用域插槽
    二、 非父子
        1.在vue的原型身上添加一个公共的vue实例,组件之间调用这个公共的实例的$on and $emit来传递数据,传递的一方调用$emit,接收的一方用$on;
        2.手动封装$on $emit $off(原理应用了观察者模式)
        3.EventBus
        4.vuex
 
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue-router实现SPA购物APP基本功能

概述 vue-router是vue中的一个核心插件,用它来实现SPA购物APP基本功能 详细 代码下载:http://www.demodashi.com/demo/10725.html vue-router是vue中的一个核心插件。 一、安装 1.如果安装脚...

osc_od61rt0p
2018/03/01
4
0
带你再看Vue文档,你就顺便学会了React ( 慎入! )

介绍 最近接手了一个React开源项目,上手前看了一些react的基础教程就撸了,之前有着半年Angular转2年Vue的前端经验,但是还是对React心生畏惧。 项目做了大概一个周了,发现果然世界上代码都...

龙小胖
2019/12/30
0
0
vue总结

一、vue实例的基本结构 二、vue事件处理、绑定属性 三、vue指令、自定义指令 四、vue过滤器 五、vue数据监听 六、vue组件 七、vue-router 八、axios 一、Vue 实例的基本结构 Vue官网API 二、...

Hzzzzzzzzz
2019/08/07
0
0
24、商品列表页之数据渲染和传值

前言:本章算是上一章《vue父子组件之间的传值》知识点在项目中的一个实际运用。 Github:https://github.com/Ewall1106/mall(请选择分支chapter24) 1、商品列表页基本数据结构及mock 在文...

Ewall_
2018/08/30
0
0
23、vue父子组件之间的传值

前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热。 Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1、父组件向子组件传值 (1)第一个就是...

Ewall_
2018/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-07-11

更新时间: 2020-07-11 00:00 Scientists make precise edits to mitochondrial DNA for first time - (nature.com) 科学家首次对线粒体DNA进行精确编辑 得分:66 | 评论:4 LibreOffice: The N......

FalconChen
37分钟前
95
0
是否有可能从另一个git存储库中挑选一个提交? - Is it possible to cherry-pick a commit from another git repository?

问题: I'm working with a git repository that needs a commit from another git repository that knows nothing of the first. 我正在使用一个git存储库,需要从另一个不知道第一个存储库......

技术盛宴
昨天
26
0
【LeetCode】53 盛最多水的容器

题目 解题思路 双指针法: https://leetcode-cn.com/problems/container-with-most-water/solution/sheng-zui-duo-shui-de-rong-qi-by-leetcode-solution/ 代码 public class Solution { ......

JaneRoad
昨天
20
0
阿里云OSS配置CDN加速

首先购买CDN流量包 然后添加域名 添加好后 然后将域名OSS.xxxx.com 解析到 生成的CDN域名上 这样就完成了

可达鸭眉头一皱
昨天
16
0
js 整数与小数正则替换片段

说明 /(\d+)/g 整数 /(\d+\.\d+)rem/g 小数 /(\d+\.\d+|\d+)rem/g 其中 | 或 条件 例子 全局查找带 rem 单位的,替换成 px 单位 let text = text.replace(/(\d+\.\d+|\d+)rem/g, function(s......

DrChenXX
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部