个人理解(重点)组件

一、如何使用组件?

注意:当我们使用的组件的时候,在下边定义的时候最好(建议。可以都使用小写)使用大驼峰写法,即两个大写字母的方式,而我们在上边把它当作标签使用的时候,直接小写,在第二个大写字母前边写(横杠)-

首先引入vue

然后new Vue创建一个vue的实例对象(如果不创建vue的实例对象,无法使用(创建)组件)

组件分类(全局组件和局部组件,这里简介全局组件)


Vue.component:('',{}) 全局组件

Vue.components: {"": {} }  : 局部组件

 Vue.component('MyFather', { })

 Vue.component创建全局组件(‘自定义组件名’,{

//组件内容

template:类似于el,不过这个可以使用模板字符串来写标签

重点:当我们使用模板字符串构建结构的时候,最外边只能使用一个标签包裹,不能使用两个标签并列,否则会报错

data(){

return {  key:value   }

//和实例化的vue里的data一样,不过这里的data是一个回掉函数,并且里边的值是return出去的(别的都一样)

}

二、组件可以嵌套吗?

组件可以嵌套

组件的关系:父子、兄弟、祖孙



嵌套(写好子组件,放到父组件的template中)


三、(组件)数据父传子

slot(插槽)


正常情况下,组件之间是绝缘的,子组件无法访问到父组件中的数据


所以我们怎么把从数据从父组件传给子组件?

步骤:(你情我愿)

①在父组件中使用子组件时,给子组件传入自定义属性;

②子组件内部声明props来接收属性值。



操作:

传静态值

验证:首先第一步(父传子但是子不会收)在父组件中使用子组件时,给子组件传入自定义属性;


这是父组件传的值 money(自定义属性) 100(值)

这个时候我们发现在子组件下边有一个$attrs


第二步:在子组件内部声明props来接收

props可以认为是一个配置项,它的值是一个数组,用来登记希望从父组件中接收什么数据

然后就变成了这个样子


这时候的子组件就可以使用父组件中的值了


传动态的值

在学习vue的时候,怎么动态绑定属性的值?

v-bind    语法糖直接写冒号:

:money=‘money’(这里的值是在data中拿的)放在这里,然后传过去

如果value写的没有,会报错说没有这个值


思考:

①加v-bind(:)和不加的区别

加了是传递动态的值,不加的话就是一个字符串

②如果传了三个值但是内部只收到一个值,会怎么样

<com1 a="1" b="2" c="3"></com1>

如果子组件内部只有props:[“a"] ,则会如何?

在子组件中就无法收到b,c的值并且, b,c并显示在dom元素的属性,在查看元素时,可见:

b和c不仅是被放弃,他俩作为自定义属性显示在dom元素上


四、(组件)数据子传父

(举例:儿子被打了告诉父亲)

不传参

原理:自定义事件 + $emit

步骤:

①在父组件中:使用子组件时,在子组件上添加自定义事件监听

<子组件

@自定义事件名1="处理事件的函数1"

@自定义事件名2="处理事件的函数2">

</子组件>

处理事件的函数1: 应该定义在父组件中的methods中。

②在子组件中:在某个时刻(根据你程序的要求),通过$emit向父组件发出事件

this.$emit(自定义事件名1)## 子组件抛出事件之后,在父组件中,收到了这个事件,并去调用对应的回调函数

结果:当子组件中发生某事时,会调用父组件中的方法

示例:

1、触发子组件的单击事件,触发hClick回掉函数

2、在回调函数中抛出abc事件

3、子组件抛出事件之后在父组件中,收到了这个事件,并去调用对应的回调函数

4、触发h1回调函数

-----------------------------------------------------------------------------------

行内写法:




-------------------------------------------------------------------------------

原理图:

子组件发生了什么事,通知父组件来处理

传参

this.$emit('事件名', 附加的数据)



obj(形参)会自动接收来自子组件的数据

打印一下obj看看


组件-传递-子传父-传递数据

背景:

在子组件中需要向父组件传值


五、在组件上使用v-model

 前面使用v-model时,只是表单元素上使用。

<input v-model="xxxx" />

这里理解,如何在组件上使用v-model

v-model的作用:双向绑定。

在组件上使用的,也是一样希望达到双向绑定的效果:

父组件的数据改变时,能传给子组件;

子组件中的数据变化时,也能回传给父组件

测试

首先在父组件中定义数据项num然后再子组件中直接使用


这样写了之后子组件上的$attrs上会出现一个value


为什么会出现value?

  在子组件使用了v-model="num",它自动做两件事:

①给子组件添加了一个名为value的属性。

相当于传一个名为value属性给子组件。 

类似于:

 <my-com :value="num"></my-com>


第一步:

相当于给子组件传了一个名为的value属性过去(父传子)

这时候要在子组件中使用props来接收这个值

这时候我们就实现了父传子


第二步:

会自动给子组件上一个名为input的事件监听,

在这个事件发生时,将回传的数据直接保存到num中。

 <my-com @input="(obj)=>{ this.num = obj }"></my-com>


监听一个input事件(这里是简化写法)(事件发生的时候,子组件把事件抛出,把它存给this.num)会把我们回传的数据,传回给this.num


如何验证呢?

用一个简单的方法(created方法,当new实例被创建时就触发)

所以它就是这样实现子组件改变的时候把值回传给父组件

如果不用v-model就是这样写(第二步)


或者

去页面观看就拿到这个值了


拿到之后再把它存起来


上边的两步真的很麻烦,所以如果使用v-model就不用写这两步了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,717评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,501评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,311评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,417评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,500评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,538评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,557评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,310评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,759评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,065评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,233评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,909评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,548评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,172评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,420评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,103评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,098评论 2 352

推荐阅读更多精彩内容