脚本宝典收集整理的这篇文章主要介绍了vue组件学习-数据传递-路由（初学者文档二），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

接上次的props验证开始，组件中的作用域都是独立的，子组件的模板不能直接引用父组件的数据，要用特殊方法才能实现数据的传递。

一、父子组件之间的通信

当我们需要在费父子之间的通信的时候，我们需要新建一个空的组件，在A组件中创建一个监听事件来监听B组件。同时我们也需要在B组件中建一个方法，来触发A组件的事件    


    示例代码：
        <div id="app">
            <app-head></app-head>
            <app-body></app-body>
          </div>
          <script src="vue.js" charset="utf-8"></script>
          <script>
            var bus = new Vue()
            var AppHead = {
              template: '<div><button @click="add">添加</button></div>',
              methods: {
                add() {
                  // 触发组件 A 中的事件
                  bus.$emit('change', 1)
                }
              }
            }
            var AppBody = {
              template: '<div>{{ counter }}</div>',
              data() {
                return {
                  counter: 0
                }
              },
              created() {
                // 在组件 B 创建的钩子中监听事件
                bus.$on('change', count => {
                  this.counter += count
                })
        
              }
            }
            var vm = new Vue({
              el: '#app',
              components: {
                AppHead,
                AppBody
              }
            })
          </script>

三、使用插槽分发内容

    我们使用组件是为了更加的方便我们的工作，但是组件化也有不太方便的地方，就是数据的处理，
为了方便使用组件，可以引入slot元素作为数据插槽来进行数据的处理分发。当我们使用这个元素，
模板的内容不会被替换掉，保留在我们想要插入的地方。

    示例代码：
    HTML部分：
        <div id='app'>
            <child>
                <div slot="header">头部内容</div>
                2222
                <div slot="footer">底部内容</div>
            </child>
        </div>
    JS部分：
        <script src="js/vue.js"></script>
        <script>
            var Child = {
                template: `<div>
                <slot name="header">header</slot> 1 
                <slot name="footer">footer</slot>
                </div>`,
            }
            var vm = new Vue({
                el: "#app",
                components: {
                    Child
                }
            })
        </script>

四、vue的路由部分

在这个部分，基本都推荐使用官方路由，更有官方文档可以查看更加详细内容，这里我就简单做一下示例。
  ①，环境的安装
    第一步：新建一个文件夹并初始化
    npm init -y
    第二步：安装
    npm i -S vue vue-router
    npm i -S axios
  
    4.1一级路由：这个比较简单，大多应用于单页面应用，不必引入整个路由库。
      <div id="app">
        <router-link to="/news">新闻管理</router-link>
        <router-link to="/shop">商城管理</router-link>
        <main>
          <router-view></router-view>
        </main>
      </div>
      <script src="./node_modules/vue/dist/vue.js" charset="utf-8"></script>
      <script src="./node_modules/vue-router/dist/vue-router.js" charset="utf-8"></script>
      <script>
        var NewsComponent = { template: '<div>新闻</div>' }
        var ShopComponent = { template: '<div>商城</div>' }
        var NotFoundComponent = { template: '<div>404</div>' }
        var routes = [
          {
          //默认路由
            path: '/',
            redirect: '/news'
          },
          {
            path: '/news',
            component: NewsComponent
          },
          {
            path: '/shop',
            component: ShopComponent
          },
          {
          //输入不正确时
            path: '*',
            component: NotFoundComponent
          }
        ]
        var router = new VueRouter({
          routes
        })
        var app = new Vue({
          router
        }).$mount('#app')
      </script>
    
    4.2 动态路由：当ID不同的用户使用的时候，就需要这个组件来渲染
    示例：
        <div id="app">
        <router-link to="/user/foo">/user/foo</router-link>
        <router-link to="/user/bar">/user/foo</router-link>
        <router-view></router-view>
      </div>
      <script src="./node_modules/vue/dist/vue.js" charset="utf-8"></script>
      <script src="./node_modules/vue-router/dist/vue-router.js" charset="utf-8"></script>
      <script>
        const User = { template: '<div>user {{ $route.params.id }}</div>' }
        const router = new VueRouter({
          routes: [
            { path: '/user/:id', component: User }
          ]
        })
        const app = new Vue({
          router
        }).$mount('#app');
      </script>
    
    4.3、监听路由变化
    示例：
            <div id="app">
          <router-link to="/user/foo">/user/foo</router-link>
          <router-link to="/user/bar">/user/bar</router-link>
          <router-view></router-view>
        </div>
        <script src="node_modules/vue/dist/vue.js"></script>
        <script src="node_modules/vue-router/dist/vue-router.js"></script>
    
        <script>
          var User = {
              template: '<div>User {{ $route.params.id }}</div>'
          }
          var router = new VueRouter({
              routes: [
                {
                  path: '/user/:id',
                  component:User
                }
              ]
          });
          var vm =new Vue({
              el: '#app',
              router
          })
        </script>
        

关于路由，还有很多值得我们去学习的地方，推荐一个好用的网站
https://router.vuejs.org/zh-c...
这里有最详细的学习路由的知识点

脚本宝典总结

以上是脚本宝典为你收集整理的vue组件学习-数据传递-路由（初学者文档二）全部内容，希望文章能够帮你解决vue组件学习-数据传递-路由（初学者文档二）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。