06. 尚硅谷_mpVue_和原生小程序绑定事件的区别及跳转页面.avi原创

好，我们继续上课，那么接着上一节课来讲，上一节课呢，我们留了个问题，就是在这儿我们是不是要去跳转页面？哎，大家可以回想一下，在原生小程序里边，它绑定世界有几种方式。哎，对，有两种，一种是使用BY后边跟一个世界名，比如说tip对吧，还有一种呢，是使用catch来加世界名，那么这两种绑定方式它有什么区别呢？首先我们得明确，呃，Bad绑定的世界叫冒泡事件，那catch绑定的事件呢，叫飞冒泡事件，也就是说catch绑定事件的话，它是会阻止冒泡的，哎，会阻止冒泡的，这是原生小程序里边为我们提供绑定事件的两种方式，那接下来我们来看一下在我们的map view里边如何绑定事件。好，那这个呢，是我们下边那个相当于模拟的一个按钮，那现在我们要绑定事件，注意在呃V里边我们是如何绑定事件，是不是用艾呀，那后边呢，完全可以再跟上我们原生小程序那些事界名，哎，你用艾click其实也没问题，At tip也行，在这呢，我们可以写上哎，我们的detail，哎，这是世界名。

OK，那么既然是事件的回调，咱要放到哪呢？是不是要放到这个methods里边，哎，要放到method里边，那我们继续往下写，OK，我去conso log，那这个呢，是to detail去打印一下，好，那我们来到我们的这一块，打开调试器，我们来看一下走走走世界，是不是已经绑定成功了呀？哎，那这个时候呢，就有同学想，那是不是在map view里边就没有办法去绑定什么绑定非冒泡事件，来我们测一个啊，我在这儿at，哎，还是at tip，那在这儿呢，我们来个headler，哎，比如说来个child，那现在这个世界咱是不是也得去定义一下OK。

把这个世界写好，我去handler，哎，Consolo去打印一个child，那这个时候呢，如果说你不做任何处理的话啊，不做任何处理的话，大家看我这一点，它是不是相当于向上冒泡，哎，也冒到负元素div的身上了，那怎么去阻止冒泡呢？哎，那这个时候呢，你就要考虑V里边怎么阻止冒泡。哎，这个时候呢，可能有的同学想到了view里面呢，为我们提供了一个东西叫世界修饰符，哎怎么去做呢？在这个世界的后边呢，我们写一个什么stop，那这个呢，其实就是我们的非冒泡世界，来我们来测一下，我移到外边往外一点一点，哎这个呢，是不是相当于是我点击的是外边负元素的那个事件，那下边我点里边，对这一次呢，它只会触发我们紫元素身上的事件。

不会向上冒泡，哎，这个呢，大家要能区分清楚。那讲懂这个以后呢，我就把这个删掉了，因为这个对于我们来说没有什么用，删掉了以后，哎，我们。就留这一个，那这个to d TL是不是我们一点击的话，它要去跳转到另外一个页面。另外一个页面。呃，跳转的话，我们还是用微信，也是原生小程序为我们提供的一个叫navi，嗯，叫navigate对吧？To，哎，这个呢，不用说，这是我们之前用过的，这有个URL，那首先呢，在这我们是不是应该有个页面的路径啊。那这个页面的话，我们是不是还得去准备一个，所以呢，我在这再去创建文件夹，我叫它list，哎，我们的列表页，哎，那这里边呢，有两个必不可少的文件，一个叫main.js，还有一个呢，就是我们的组件，在这儿呢，我们叫它list，没问题，那首先在这儿的套路是一样的，Iport view from view，那接下来iport list from，哎，当前路径下的list.view接下来我们是不是要去生成一个实例，等于另一个view，然后呢，把这个list放进来，好，然后呢，去挂载当前的页面，那这边写完了以后，我们在这去测一个东西来，这叫list组件写完这以后我问一下的啊，在我们这儿我就写上它，你不知道pages下边，那肯定是list的下边mean。

对吧，那这为什么是me呢？上来我给大家解释过啊，给大家解释过在这个ABB点，杰森这哎，我们是不是要在这儿写一个路径啊。

为什么是me呢？是因为他打包完了这个文件呢，是不是就叫mean了点什么，什么微信mail呀，OK，那看到这了，有同学肯定能想到一个问题，我是不是应该把新建页面的路径呢放到这个里边。对吧，哎，所以呢，我们在这把它写完整好，写完这个以后，我这也写好了，那这个时候呢，要给大家说明一个问题啊，这也重新编译了，好，你看这。报了一个错误，他说未找到p.JS中定义的，哎，这个东西。那也就是说我写完这他是不是报错了，但是呢，你可以看一下我这写的这个路径，这完全没有问题的，哎，完全没有问题，好，那为什么会出这个错误呢？注意了，在这儿呢，要讲一个他比较坑的地方。

就是说在map view这个项目里边，你每新建一个页面的话，哎，你在这儿CTRLS，你比如说我这儿大家看一下，我写完CTRL1保存，它是不是编译了呀，哎，看上去是编译了，但是呢，你新建的页面它是不会帮你打包到哎Dis里边，大家看这是不是只有一个页面。所以呢，针对这个问题，我们得重新去执行一下NTM start OK，让他跑一下。好，这边跑完了以后，我们再来到这一块，首先你看刚刚的报错是不是没有了啊好，那这个时候呢，我去点击一下，哎，它是吧，可以跳转了呀，OK，那这节课呢，就针对这个小小点呢，哎给大家去讲解一下，好我们先把这个视频停一下。