vue02----什么是组件、组件创建、全局组件、局部组件、组件嵌套、组件传值、为什么组件中的data不是一个对象而是一个函数

### 什么是组件?

将代码进行复用

组件是实例的拓展子类

组件继承自实例,实例有的组件大部分都有,稍有变异

### 组件创建

创建组件模板的2种方式:

1、通过template标签     template:"#tpl"

2、通过字符串模板   template:"<h1>吴启浪</h1>"

### 全局组件

所有的实例都可以使用

Vue.component("wql",{

template:"<h1>吴启浪</h1>"

})

### 局部组件

注册到实例内部的components,只有注册实例可以使用

let vm=new Vue({

el:"#app",

data:{},

components:{

"wql":"<h1>吴启浪</h1>"

}

});

### 组件嵌套

全局组件嵌套,哪里都能用,没有严格的规定父子和子父

局部组件嵌套,子组件只能在父组件中使用,严格按照实例中的父子关系渲染

### 组件传值

父传子:props属性

1、在子组件中,props用来接收自定义属性的值,这个值可以在该组件中使用

2、这个值只能拿来用,不能改

3、自定义属性的值为变量或表达式时,在前面加  :

4、接收方式:数组----props:["hehe"],对象----props:{hehe:{type:number,default:100,required:true}}

type----限制外部数据的类型

default----默认值,当父组件没有给子组件传值时使用默认值

required:true----表示当前属性是必传的值(和default二选一)

子传父:$emit()属性----触发本组件身上的自定义方法

给当前子组件绑定一个自定义方法,值为接收参数的函数(这个函数不带括号),在子组件内部通过this.$emit()来调用自定义方法。

$emit("hehe",100)

hehe----自定义事件名

100----参数

非父子

亲兄弟之间:子组件控制父组件的显示和隐藏

远方亲戚:Eventbus(事件总线)

let bus=new Vue();  创建一个空实例

bus.$on();  在实例上注册事件

bus.$emit();    触发实例上$on注册的事件

远方亲戚

事件总线(eventbus):

let bus=new Vue();  // 空实例   on----可以在实例上注册一个事件,emit----可以触发通过on注册的事件

### Q:

1、为什么组件中的data不是一个对象而是一个函数

如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也会随之改变,只有当两个实例拥有自己的作用域时,才不会互相干扰。

这是因为JavaScript的特性所导致,在组件中,data必须以函数的形式存在,不可以是对象。

组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己的私有数据空间,他们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个就全都改了。

原文地址:https://www.cnblogs.com/wuqilang/p/12271314.html

时间: 2024-10-05 23:27:27

vue02----什么是组件、组件创建、全局组件、局部组件、组件嵌套、组件传值、为什么组件中的data不是一个对象而是一个函数的相关文章

vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3>我是标题3</h3>' }); Vue.component('aaa',Aaa); *组件里面放数据: data必须是函数的形式,函数必须返回一个对象(json) 2. 局部组件 放到某个组件内部 var vm=new Vue({ el:'#box', data:{ bSign:true }, components:{ //局部组件 aaa:Aaa } }); 1

Vue系列之 =&gt; 组件中的data和methods

使用data 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA

vue组件的创建

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! 这里有一个Vue组件的示例: Vue.component('Vheader',{ data:function(){ return { } }, template:`<div class="header"> <div class="w"> <

Vue——组件的创建

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! 这里有一个Vue组件的示例: Vue.component('Vheader',{ data:function(){ return { } }, template:`<div class="header"> <div class="w"> <

87 全局和局部组件, 子父和父子之间的通信 混入 插槽 路飞导航栏

主要内容: 1  全局组件: a : 定义一个全局组件 Vue.component( 'global-component', { template: `<div> 注意: template一定要包一层div <h3>{{wanrong}}</h3> <h2>{{wanrong}}</h2> </div>`, data() { return { wanrong: 'hello', } } } ); 2  全局组件的使用的两种方式: a:

WebKit(Blink分支)各组件的创建(FrameView)

从render_view_impl.cc开始说起. 1.     方法RenderViewImpl::Initialize中有:   webview()->setMainFrame(WebFrame::create(main_render_frame_.get())); 2.     先看里面的参数,即WebFrame::create 此代码执行:文件WebFraemImpl.cc中方法:WebFrame::create 3.     上面方法执行同文件中方法:WebFrameImpl::cre

【Cocos2dx】使用CCControlButton创建按钮、按钮点击事件,点击事件中的组件获取,setPosition的坐标问题

按钮不仅在游戏,在任何地方都是不可或缺却又是最基本的东西.在游戏引擎Cocos2dx中也不例外. 下面用一个例子说明Cocos2dx中如何使用按钮,同时,如果在Cocos2dx中获取层,也就是场景.舞台中的组件. 如下图,有一个按钮Clickme,被点击时候与不被点击的时间,其背景图片是不同的.其实就是资源文件夹Resource中早就被玩坏的两个图片,一张CloseNormal.png一张CloseSelected.png被拉伸后的惨状. Cocos2dx的资源文件夹在<[Cocos2dx]资源

react组件的创建

最近项目接触react和rn,之前会一些vue和小程序,起初写react是很难受的,尤其是jsx的写法,不过2周过后感觉写起来有点舒服了... 目前react的组件一共有3种方式:React.createClass,React.Component,函数式 React.createClass(API已经移除) 这是早期react组件的创建方式,如果你看的文章是几年之前写的,很多都是这种方式(比如阮老师这篇React 入门实例教程) React.createClass现在这一API已经移除,如果非要

Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合

Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合 一丶FORM的介绍 1.生成页面可用的HTML标签 2.对用户提交的数据进行校验 3.保留上次输入内容 二丶使用form组件实现注册功能 from django import forms # 导入forms组件 # 按照Django form组件的要求自己写一个类 class RegForm(forms.Form): # 继承Form name = forms.Ch