00:00
好嘞,各位,咱们呢接着往下聊,我把刚才讲props的代码呢,给你放在这儿了啊,编号呢是三,那在这一小节呢,咱们再学一个新的配置项,它的名字呀,叫做mix in,它有一个好听的中文名,叫什么呢?叫做混入,哎,有些人呢,不管它叫混入,那叫什么呢?叫混合啊,合并的合,其实都是一个意思,但是在官方文档里,人家叫混入,OK,来吧,代码上见student组件我还留着,但是里边的东西呢,精简点,只留下两个信息,就是学生的姓名,还有性别,并且这些东西不再由外部传进来了,是我自己直接配置好,所以这行呢,This给他删掉,这块呢,给他改一下啊,叫做name啊,给他个名字吧,叫做张三,在这呢,是性别,那给他随便写一个,比如说是一个男士,OK methods留着,但是里边的东西删掉,因为一会儿我要配置方法,所有pros相关的这些全都给他删掉,OK啊,提一个需求,就是当你。
01:00
点击学生姓名的时候,弹窗展示这个人的名字,给个点击事件,然后给一个回调的名字,叫做show name,好了,复制把这个呢写在这儿,里边的逻辑也很简单,Alert直接写就得了,this.name OK,写完了,那在这个基础上呢,我再复制一个,哎,叫做school组件,School他俩长得有点像啊,但是里边的内容是不一样的,这不叫学生姓名,这叫什么呢?叫做学校的这个名称啊,然后存储数据的那个名字也叫内幕啊,然后在这儿呢,改一下叫做学校的什么呢?呃,随便来一个,比如说地址,那在这儿改一下address OK,那这儿呢,就得复制给他调整一下啊,这个名字不可能叫张三,是咱们上硅谷,还有这儿也得调整一下school OK,不好,那这个地址呢,我就简单写了,叫做北京啊,然后呢,跟那个功能一样,你点学校名弹那就是学校名,哎,那你点学生的这个姓名呢,那弹的就是学生名,OK,来那APP里边就得用,不需要再传入这些。
02:00
东西了啊,引入的时候多引入一个人就得了,谁呢故啊,路径也得换,注册时候也得把它注册了,而且用的时候还得写一个他的组建标签,对吧?各位中间呢,我给你加一个HR的风格,让你看得明白一点,好打开瞧一下效果,走诶是这意思是吧,控制台呢,也没什么错误啊,而且在这儿呢看一下走这是v school student好各位,现在呢,请你回头看一下你写的代码啊来咱还没验证那功能呢,是吧?来验证一下走上硅谷,那这呢一点走张三,诶这回回来吧,来咱看看代码,看哪呢?各位你就看这俩组件,一个是student,一个是school,我呢给你分个屏,在这呢给你隐藏,同学,你发没发现啊这两个组件,哎,当然不是student啊,是school,发没发现这两个组件里面有一些东西是一样的,你就比如说左边的绿色框和右边的粉色框,你觉不觉得就是一样的,一模一样,哎,那你就可以这么办,把这俩东西呢,都从这里边删除,然后呢,你。
03:00
单独写一个红色的东西,然后在这儿引入用一下,在这引入用一下,同学,这就叫混合啊,这就叫混入,所谓的混入混合啥意思呀?就是两个组件怎么办?共享一个配置,并且这个配置得是一样的啊,不一样的你怎么共享啊,好,来同学写写啊,给它关掉。接下来呢,我创建这么一个文件啊,叫做makes in.GS注意啊,各位不是说你非得叫这个mix in.GS你叫ABC.gs也行,我之所以叫mix in,是因为我告诉你我在讲这东西,好各位,那这样打开这个school,你就把methods这个配置项给它粘走啊,空行删掉,逗号删掉,然后呢,再回到student里面啊,这个呢也给它删掉啊,不写了,因为是一样的,好,你在这里边写咋写呢?还是写一个对象,把methods丢里边去,当然你直接这么写是不对的,最起码咱说你是不是得写一个cost a,然后等于啊,得有一个复制语句吧,那别叫A了,叫什么呢?Mix in,那最后呢,同学,你得把这个对象交出去,要不人家别人拿那个port。
04:00
语句引入你这个makes in.JS人家能引入个啥呢?啥也没有啊,所以说同学暴露一下啊,走着,那我怎么写a part default,我要这么写,这属于什么呀?是不是默认暴露啊?哎,那我要这么写呢,各位就看你模块画的基本功够不够了,各位把aport往这一加,同学这叫啥暴露,这叫分别暴露对不对,我就这么写了,那然后怎么去用呢?那就非常简单了,各位首先啊,我验证一下,我把这methods拿走了,死故里边没有这methods了啊,然后在这儿呢,还写收name,肯定会报错,哎,你看一下回到控制台这刷新一波,走各位绝对报错是不是,你点肯定也没有效果了,好,接下来应用这个混合,那在这儿呢,你就得引入,看着慢慢来引入谁呢?啊,来同学,我刚才用的是分别暴露,那是不是就得写这种花括号的形式啊?哎,当前目录不行了,点点杠翻出去找到谁呢?Make里边有谁呢?同学,你得看你咋暴露的,我这要写A,你就告诉我咋写吧,我这写的可是A呀,那你在这儿呢?你在这个词库里,那你就得写A了,对吧?
05:00
对,哎,但是刚才我写的是makes in,哎,那在这儿呢,你就写吧,Makes in它会有提示的,对不?然后各位你看好了啊,怎么写呢?怎么应用这个混合呢?来在这给你写好注释吧,啊引入的可不是组件的,叫做引入一个混合,那这样吧,同学我防止大家晕啊,Low点没关系,大家别晕,我就要混混合合行不?各位,哎,有点low,但是你能懂就行,这是不是得这么写,怎么去应用这个混合呢?借助一个全新的配置项啊各位叫做什么来着,Makes in,但是您得加个S,意思就是它可以配置多个混合啊,它的值呢,同学得写成一个数组,跟刚才那pro有点像,想用哪个混合,想用它来写在这儿,OK,用完了。啊,那同理谁也是这么用的呢?Student你把它复制过来呗,来到这儿呗,一引入呗,是不,然后把这一行粘过来,一复制往这一写啊看好了是在这儿,不要想说老师我只有一个混合,是不是可以直接写,不行,必须写在一个数组里,好了保存,各位这时候你瞧刷新错误啊,也不报了是吧?哎,这功能呢,它也正常了,所以说同学你感受一下啊,你这个组件和我这个组件共有的东西,我是不是可以哎抽离成一个混合呀,那这个混合里面都能写什么呢?同学,我就这样给你讲吧,这个里边所写的每一个配置项,在混合里面都可以去写,你比如说啊各位我在这里呢,写这么一个东西,有一个钩子叫mount的,你还记得吧?诶,一挂载完是不是就执行这个呀,好,那你瞧着啊,各位我在这写一个consolelo,就是只要这个组件挂载完了,就说出一个话,哎,叫做你好啊,我这么一写不要紧,各位你回到控制台看啊,我刷新一波,有的时候吧,他刷新不及时,你就自己刷新,你看你好啊来各位你说是不是输出了两遍,为啥两遍。
06:44
因为同学这个混合应用给了两个组件,你说对不对,就相当于啊各位你在词故里面你写了一个啥mounteded,然后你在这个里面也写了个啥mounteded,就是这意思,OK,当然这得是英文的逗号,但你不用一个一个写了,直接混合一步到位了,是不体会体会,所以说同学混合就是复用配置,你说是不?哎,那我们再测试一下,你比如说啊,我又来了一个,嗯,再复制一份,叫混合几呢?哎,叫混合二行吧,哎,叫混合二,然后里边啊,我不配置方法了,哎,我也不配置这个mount了,我配置什么呢?我配置数据,这可以吧,各位来,我用快捷键去写啊,Data应该是在这,我写一个X是100,我写一个Y呢,是200,各位,那你看这是不是也是属于配置数据的配置啊,那你看着在这儿呢,我再引入的时候啊,再来个混合二,我再把这个混合二啊给它应用上,OK,把这个复制在这儿呢,我再写一个在这儿同样的道理写个混合二,那在这儿呢,再写一个混合二,那同学这时候你看啊刷新一波肯定。
07:44
它不报错误,主要是看这打开的时候,同学你看school,明明我只写了address,还有内幕,那怎么还出现了这个X和Y呢?诶,那是因为人家拿着混合这个里边所配置的东西和你这个里边的东西进行了一个整合,同学人家没说叫替换,叫混合,你有的我有的组合在一起给你用,OK,你看我这边有XY,那你这边呢,有内膜的address对不啊,那我估计啊,大家也能猜到一个事儿,猜到什么事儿呢?说老师你说要是这种场景怎么办呀,我这有X100 Y是二,但是你说吧,我这写的时候好家伙,我也写个XX多少呢?666老师这听谁的呀?
08:25
哎,是这意思哈,各位打架了这咋办呢?以混合为主,那就是200,以你这为主,那就是666,那到底听谁的呢?哎,我们拭目以待,刷新一下,点击school各位多少666,所以说它的原则是什么啊,各位原则是这样的,如果你这没有的,但是混合里边有来给你,但是如果你这里边有的,各位怎么的以你的为主啊,说白了不破坏你的代码,OK,这就是混合,但是这里边有一个特殊的情况,什么情况呢?你看一下啊各位我在这儿是不是说那个只要组建一挂载就是你好啊呀啊,那你看着啊各位,我把这个呢复制一份,我在死故里啊,再给你写一个,你瞧着在词库里边我再给你写一个啊叫什么呢?你好啊,然后这回呢,给他写这么多的感叹号,那缩进也调一下,我问各位,你说这是不是也冲突,我自己写了一个mon的钩子,说你好啊,一堆感叹号,他这儿也有一个mon的,对吧,但是在这儿说的是你好啊,一个感叹号,那最终听谁的呢?说老师,那我知道了。
09:26
你刚说完呀,以我的为主啊,同学,这些东西如果发生冲突的时候,你比如说data中的数据,Methods中的方法,如果发生冲突的时候,都以你为主啊,你是老大,但是像这个生命周期钩子呀,同学是这样的,不以任何人为主啊,是都要。说老师这啥意思呢?你瞧一下各位啊,我给你刷新一下你就明白了,刷新各位你看这是不是你好啊,一个这是不是你好啊一堆说老师这是谁,同学这是那个谁,这是那个student,你把这个给他,比如说student不用混合,各位来你看着啊,给他注掉啊,你看一下效果啊,刷新走说老师咋报错,报错就对了,各位你琢磨一下student这块用不用收name用了,那我再问你同学收name,你这混合是不是没引入啊,那肯定没有嘛,所以咱不关注这个报错就看这儿,各位你看你好啊,一个感叹号,这儿呢,一堆同学你觉没觉得啥,就是对于生命周期钩子来说,它有特殊处理,就是这边有mountain的,你这边也有mount的,那咋的都要来者不拒是不?而且你注意顺序的问题,同学诶这时候啊,你就得往后靠了,你没发现你写那mounted在后,人家混合里那mounted在前,对不?各位哎,OK,嗯,这就是混合,所以说同学你发没发现组件已经是在复用代码了,那组件里面如果有很多的配置是相同的,可以借助混。
10:45
呃,去复用,OK啊,这就是混合,那这混合呢,刚才我用的这些啊,都是属于局部混合,什么叫局部混合呢?同学你看啊,我是在这儿引入的混合,完了在这儿配置的混合是不?各位,那你看这儿引入的配置的对不对?来给它解开吧,那除了有这种方式啊,还有个更好的方式,同学,就是全局混合啥意思呢?你看着这块不引入这块,不配置这块呢,也不引入这块呢,哎,也不配置好,那怎么玩呢?它这么玩,你瞧着在你的mean.gs里面,哎,你去引入吧,走inport画括号from哪呢?当前目录下的混合里边有什么呢?一个叫混合哎,一个叫什么呢?混合二,然后接下来呢,各位来我这么写了,瞧着啊,在这个语you身上啊,有这么一个方法,叫做makes in,不叫makes ins叫makes in啊,然后里边传吧,同学用谁混合还用谁混合二同学你这么一写,不要。
11:45
啊,我告诉你,在你整个应用里面,所有的VC以及那个VM都会得到你这些东西,哎,怎么验证呢?瞧着刷新一波,首先看啊走正常吧,这再走正常吧,为啥有这么多,你好啊呀,这什么情况呀,各位啊,来,你看看你在哪用的,各位来回到这儿,这个里边是不是一个感叹号,所以说school用了一次,Student用了一次,但是在这儿呢,同学你自己不又写了一个吗?是不,各位哎,那我把这个呢,就给它删掉啊,保存一下好,那这回呢,回头看效果,刷新一上来三遍,你好啊,那你说为啥是三遍呢?诶其实加一起应该是四遍,你说为啥是四遍呢?诶我告诉你各位,你这里边啊一共有多少个东西,你自己瞧一个VM,三个VC加一起几个四个,他们都要挂载,挂载就都得输出你好啊对不?各位,那你自己瞧瞧是不是这样,打开rota同学里边有没有SY,打开APP有没有打开school对吧,除了有SY,还有你写的这些,然后这跟你冲突了。
12:45
你的为主在这儿呢,你看是不是这样的,哎,所以说同学这就是什么呢?这就是属于全局的这么一个混合啊,在这一应用别的地方你就不用再写了,是不?反正也有弊端,你这么一写吧,同学VM身上哪哪哪都是了,对不?各位诶这就是混合,好来咱总结一下各位,混合也叫混入功能,就是可以把诶叫做多个组件共用的啊共用的配置可以把多个组件,诶那就是那混入功能就是可以把多个组件共用的配置提取成一个混入对象。使用方式,第一步你得定义混合,例如这种写法对吧,其实就是一个对象,第二步你得使用混入,那怎么使用呢?有两种方式,一个叫做全局混入,一个叫做局部混入,OK,各位好,那么这一小节呢,我们停。
我来说两句