vue路由使用以及组件扩展（1.定义vue组件、父子组件传值、ref的使用、Vue中路由的使用、计算属性和监听器、method、computed和watch的区别）

最新推荐文章于 2024-06-20 14:08:31 发布

script~

最新推荐文章于 2024-06-20 14:08:31 发布

阅读量286

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_48780364/article/details/127659240

版权

本文详细介绍了Vue.js中的组件定义、全局组件的三种创建方式、组件间通信、路由使用、计算属性和监听器，以及method、computed和watch的区别。重点探讨了组件的动态切换、父子组件的值传递、路由的配置与跳转，同时讲解了如何通过ref获取DOM节点和组件引用。此外，还涵盖了前端路由的概念和应用，以及参数传递和嵌套路由的实现。

摘要由CSDN通过智能技术生成

定义vue组件

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

全局组件定义的三种方式:

使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
    template: '<h1>登录</h1>'
  });
  Vue.component('login', login);

直接使用 Vue.component 方法：

Vue.component('register', {
    template: '<h1>注册</h1>'
  });

将模板字符串，定义到script标签种：

<script id="tmpl" type="x-template">
    <div><a href="#">登录</a> | <a href="#">注册</a></div>
  </script>

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
    template: '#tmpl'
  });

注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

组件中展示数据和响应事件

在组件中，data需要被定义为一个方法，例如：

Vue.component('account', {
    template: '#tmpl',
    data() {
      return {
        msg: '大家好！'
      }
    },
    methods:{
      login(){
        alert('点击了登录按钮');
      }
    }
  });

在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；

为什么组件中的data属性必须定义为一个方法并返回一个对象

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
    <hr>
    <counter></counter>
  </div>


  <template id="tmpl">
    <div>
      <input type="button" value="+1" @click="increment">
      <h3>{
  {count}}</h3>
    </div>
  </template>

  <script>
    var dataObj = { count: 0 }

    // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
    Vue.component('counter', {
      template: '#tmpl',
      data: function () {
        // return dataObj
        return { count: 0 }
      },
      methods: {
        increment() {
          this.count++
        }
      }
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

</html>

使用components属性定义局部子组件

组件实例定义方式：

<script>
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: { // 定义子组件
      account: { // account 组件
        template: '<div><h1>这是Account组件{
  {name}}</h1><login></login></div>', // 在这里使用定义的子组件
        components: { // 定义子组件的子组件
          login: { // login 组件
            template: "<h3>这是登录组件</h3>"
          }
        }
      }
    }
  });
</script>

引用组件：

<div id="app">
 <account></account>
</div>

使用flag标识符结合v-if和v-else切换组件

页面结构：

<div id="app">
  <input type="button" value="toggle" @click="flag=!flag">
  <my-com1 v-if="flag"></my-com1>
  <my-com2 v-else="flag"></my-com2>
</div>

Vue实例定义：

<script>
  Vue.component('myCom1', {
    template: '<h3>奔波霸</h3>'
  })
  Vue.component('myCom2', {
    template: '<h3>霸波奔</h3>'
  })

  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {
      flag: true
    },
    methods: {}
  });
</script>

使用:is属性来切换不同的子组件，并添加切换动画

组件实例定义方式：

// 登录组件
  const login = Vue.extend({
    template: `<div>
      <h3>登录组件</h3>
    </div>`
  });
  Vue.component('login', login);

  // 注册组件
  const register = Vue.extend({
    template: `<div>
      <h3>注册组件</h3>
    </div>`
  });
  Vue.component('register', register);

  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: { comName: 'login' },
    methods: {}
  });

使用component标签，来引用组件，并通过:is属性来指定要加载的组件：

<div id="app">
<a href="#" @click.prevent="comName='login'">登录</a>
  <a href="#" @click.prevent="comName='register'">注册</a>
  <hr>
  <transition mode="out-in">
    <component :is="comName"></component&

最低0.47元/天解锁文章

script~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue路由使用以及组件扩展（1.定义vue组件、父子组件传值、ref的使用、Vue中路由的使用、计算属性和监听器、method、computed和watch的区别）

vue路由使用以及组件扩展（定义vue组件、全局组件定义的三种方式、组件中展示数据和响应事件、使用components属性定义局部子组件、使用flag标识符结合v-if和v-else切换组件、使用:is属性来切换不同的子组件，并添加切换动画、父组件传值子组件、 ref的使用、Vue中路由的使用、路由的跳转、路由重定向、选中路由高亮、组件的嵌套、命名视图、计算属性和监听器、Computed用法、method、computed和watch的区别）
复制链接

扫一扫