vue渐进式框架-组件封装及通信

最新推荐文章于 2023-02-10 17:47:25 发布

Ai.ﻮ

最新推荐文章于 2023-02-10 17:47:25 发布

阅读量138

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_48852584/article/details/108410922

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue组件：

组件是可复用的 Vue 实例，且带有一个名字。自定义组件的名字，一定要用多个单词（避免未来某天和HTML5新增标签冲突），建议用中划线连接起来。

1、封装组件有什么好处？

复用、便于维护(一处修改多处同步变化)、隐藏细节快速开发，使用第三方开源的组件库快速搭建我们自己的产品

2.父子组件通信：自定义属性、自定义事件

父组件向子组件传值，使用自定义属性，子组件使用props接收子组件向父组件传值，使用自定义事件，子组件this.$emit('事件名','给父组件的数据')

实现一个语言选项的小demo，代码如下（示例）：

<!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>lang</title>
  <style media="screen">
    .lang {
      display: flex;
      line-height: 60px;
      text-align: center;
    }
    .lang span {
      flex: 1;
      border: 1px solid #ccc;
    }
    .lang span.on {
      color: red;
    }
  </style>
</head>
<body>

  <div id='app'>

    <!-- :value 和 @input = v-model -->
    <qf-language v-model='lang'></qf-language>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    Vue.component('qf-language', {
      props: {
        value: {
          type: Number,  //用于自定义属性的数据类型
          required: true  // 是否必填
        }
      },
      template: `
      <div class='lang'>
        <span
          v-for='item in arr'
          v-text='item.label'
          :class='{"on":value==item.id}'
          @click='$emit("input", item.id)'
        >
        </span>
      </div>
      `,
      data: function() {
        return {
          arr: [
            {id: 1, label: '中文'},
            {id: 2, label: '英文'},
            {id: 3, label: '德国'},
            {id: 4, label: '法语'},
            {id: 5, label: '日语'}
          ]
        }
      }
    })

  </script>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        lang: 1
      }
    })
  </script>

</body>
</html>

计算属性和监听器：

computed，与声明式变量关联，当声明式变量变化时，计算属性自动执行 watch，可以监听三种东西——声明式变量，计算属性，路由变化

代码如下（示例）：


<body>
  <div id="app">
    <h1 v-text='count'></h1>
    <h1 v-text='res'></h1>
    <button @click='changeCount'>增加</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script>
    
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        count: 1
      },
      computed: {
        res: function() {
          return this.count*100
        }
      },
      watch: {
        count: function(newVal, oldVal) {
          console.log('new', newVal)
          console.log('old', oldVal)
        },
        res: function(newVal, oldVal) {
          console.log('res new', newVal)
          console.log('res old', oldVal)
        }
      },
      methods: {
        changeCount() {
          this.count++
        }
    })
  </script>

</body>
</html>

Ai.ﻮ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue渐进式框架-组件封装及通信

Vue组件：组件是可复用的 Vue 实例，且带有一个名字。自定义组件的名字，一定要用多个单词（避免未来某天和HTML5新增标签冲突），建议用中划线连接起来。1、封装组件有什么好处？复用、便于维护(一处修改多处同步变化)、隐藏细节快速开发，使用第三方开源的组件库快速搭建我们自己的产品2.父子组件通信：自定义属性、自定义事件父组件向子组件传值，使用自定义属性，子组件使用props接收子组件向父组件传值，使用自定义事件，子组件this.$emit('事件名','给父组件的数据')实
复制链接

扫一扫

专栏目录