Vue进阶 =＞ 组件通信 provide 和 inject,过滤器 filter,监听器 watch,class 和 style高级用法,Vue.observable

最新推荐文章于 2024-05-03 16:31:49 发布
最新推荐文章于 2024-05-03 16:31:49 发布
阅读量333 收藏 1
点赞数 1
分类专栏： # 【Vue2从基础到进阶】 文章标签： vue.js 前端 javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48200589/article/details/118637641
版权

1.组件通信 provide 和 inject

<html>
  <head>
    <title>组件通信 provide 和 inject</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <Test></Test>
    </div>
    <script>
      function registerPlugin() {
        Vue.component('Test', {
          template: '<div>{{message}}<Test2 /></div>',
          provide() {
            return {
              elTest: this
            }
          }, // function 的用途是为了获取运行时环境，否则 this 将指向 window
          data() {
            return {
              message: 'message from Test'
            }
          },
          methods: {
            change(component) {
              this.message = 'message from ' + component
            }
          }
        })
        Vue.component('Test2', {
          template: '<Test3 />'
        })
        Vue.component('Test3', {
          template: '<button @click="changeMessage">change</button>',
          inject: ['elTest'],
          methods: {
            changeMessage() {
              this.elTest.change(this.$options._componentTag)
            }
          }
        })
      }
      Vue.use(registerPlugin)
      new Vue({
        el: '#root'
      })
    </script>
  </body>
</html>

2.过滤器 filter

<html>
  <head>
    <title>过滤器 filter</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      {{message | lower}}
    </div>
    <script>
      new Vue({
        el: '#root',
        filters: {
          lower(value) {
            return value.toLowerCase()
          }
        },
        data() {
          return {
            message: 'Hello Vue'
          }
        }
      })
    </script>
  </body>
</html>

3.监听器 watch

<html>
  <head>
    <title>监听器 watch</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h3>Watch 用法1：常见用法</h3>
      <input v-model="message">
      <span>{{copyMessage}}</span>
    </div>
    <div id="root2">
      <h3>Watch 用法2：绑定方法</h3>
      <input v-model="message">
      <span>{{copyMessage}}</span>
    </div>
    <div id="root3">
      <h3>Watch 用法3：deep + handler</h3>
      <input v-model="deepMessage.a.b">
      <span>{{copyMessage}}</span>
    </div>
    <div id="root4">
      <h3>Watch 用法4：immediate</h3>
      <input v-model="message">
      <span>{{copyMessage}}</span>
    </div>
    <div id="root5">
      <h3>Watch 用法5：绑定多个 handler</h3>
      <input v-model="message">
      <span>{{copyMessage}}</span>
    </div>
    <div id="root6">
      <h3>Watch 用法6：监听对象属性</h3>
      <input v-model="deepMessage.a.b">
      <span>{{copyMessage}}</span>
    </div>
      
    <script>
      new Vue({
        el: '#root',
        watch: {
          message(value) {
            this.copyMessage = value
          }
        },
        data() {
          return {
            message: 'Hello Vue',
            copyMessage: ''
          }
        }
      })
      new Vue({
        el: '#root2',
        watch: {
          message: 'handleMessage'
        },
        data() {
          return {
            message: 'Hello Vue',
            copyMessage: ''
          }
        },
        methods: {
          handleMessage(value) {
            this.copyMessage = value
          }
        }
      })
      new Vue({
        el: '#root3',
        watch: {
          deepMessage: {
            handler: 'handleDeepMessage',
            deep: true
          }
        },
        data() {
          return {
            deepMessage: {
              a: {
                b: 'Deep Message'
              }
            },
            copyMessage: ''
          }
        },
        methods: {
          handleDeepMessage(value) {
            this.copyMessage = value.a.b
          }
        }
      })
      new Vue({
        el: '#root4',
        watch: {
          message: {
            handler: 'handleMessage',
            immediate: true,
          }
        },
        data() {
          return {
            message: 'Hello Vue',
            copyMessage: ''
          }
        },
        methods: {
          handleMessage(value) {
            this.copyMessage = value
          }
        }
      }),
      new Vue({
        el: '#root5',
        watch: {
          message: [{
            handler: 'handleMessage',
          },
          'handleMessage2',
          function(value) {
            this.copyMessage = this.copyMessage + '...'
          }]
        },
        data() {
          return {
            message: 'Hello Vue',
            copyMessage: ''
          }
        },
        methods: {
          handleMessage(value) {
            this.copyMessage = value
          },
          handleMessage2(value) {
            this.copyMessage = this.copyMessage + '*'
          }
        }
      })
      new Vue({
        el: '#root6',
        watch: {
          'deepMessage.a.b': 'handleMessage'
        },
        data() {
          return {
            deepMessage: { a: { b: 'Hello Vue' } },
            copyMessage: ''
          }
        },
        methods: {
          handleMessage(value) {
            this.copyMessage = value
          }
        }
      })
    </script>
  </body>
</html>

4.class 和 style 绑定的高级用法

<html>
  <head>
    <title>class 和 style 绑定的高级用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div :class="['active', 'normal']">数组绑定多个class</div>
      <div :class="[{active: isActive}, 'normal']">数组包含对象绑定class</div>
      <div :class="[showWarning(), 'normal']">数组包含方法绑定class</div>
      <div :style="[warning, bold]">数组绑定多个style</div>
      <div :style="[warning, mix()]">数组包含方法绑定style</div>
      <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">style多重值</div>
    </div>
    <script>
      new Vue({
        el: '#root',
        data() {
          return {
            isActive: true,
            warning: {
              color: 'orange'
            },
            bold: {
              fontWeight: 'bold'
            }
          }
        },
        methods: {
          showWarning() {
            return 'warning'
          },
          mix() {
            return {
              ...this.bold,
              fontSize: 20
            }
          }
        }
      })
    </script>
  </body>
</html>

5.Vue.observable

<html>
  <head>
    <title>Vue.observable</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      {{message}}
      <button @click="change">Change</button>
    </div>
    <script>
      const state = Vue.observable({ message: 'Vue 2.6' })
      const mutation = {
        setMessage(value) {
          state.message = value
        }
      }
      new Vue({
        el: '#root',
        computed: {
          message() {
            return state.message
          }
        },
        methods: {
          change() {
            mutation.setMessage('Vue 3.0')
          }
        }
      })
    </script>
  </body>
</html>

6.插槽 slot

<html>
  <head>
    <title>插槽 slot</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div>案例1：slot的基本用法</div>
      <Test>
        <template v-slot:header="{user}">
          <div>自定义header({{user.a}})</div>
        </template>
        <template v-slot="{user}">
          <div>自定义body({{user.b}})</div>
        </template>
      </Test>
    </div>
    <div id="root2">
      <div>案例2：Vue2.6新特性 - 动态slot</div>
      <Test>
        <template v-slot:[section]="{section}">
          <div>this is {{section}}</div>
        </template>
      </Test>
      <button @click="change">switch header and body</button>
    </div>
    <script>
      Vue.component('Test', {
        template: 
          '<div>' +
            '<slot name="header" :user="obj" :section="\'header\'">' +
              '<div>默认header</div>' +
            '</slot>' +
            '<slot :user="obj" :section="\'body\'">默认body</slot>' +
          '</div>',
        data() {
          return {
            obj: { a: 1, b: 2 }
          }
        }
      })
      new Vue({ el: '#root' })
      new Vue({ 
        el: '#root2',
        data() {
          return {
            section: 'header'
          }
        },
        methods: {
          change() {
            this.section === 'header' ?
              this.section = 'default' :
              this.section = 'header'
          }
        }
      })
    </script>
  </body>
</html>
不停喝水
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue组件通信入门之Provide和Inject机制
10-15
主要给大家介绍了关于Vue组件通信入门之Provide和Inject机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue组件通信具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue父组件给子组件的组件传值provide inject的方法
10-16
Vue.js 的 `provide` 和 `inject` 是一种高级的数据传递机制，主要用于解决组件树中深层组件间通信的问题，特别是当不直接存在父子关系时。它们允许父组件提供一个值，而任何后代组件都可以通过 `inject` 来接收这个...
vue.observable()
龚珂心的博客
01-18 742
1、observable 是什么 observable翻译过来可以理解成 可观察的 vue 中的定义 Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器 Vue.observable({ count : 1}) 2、使用场景 在非父子组件通信是， 通常可以使用vuex 或者bus 但是使用的功能不太复杂 使用这两个又有点繁琐，这是o
provide inject 传值用watch 监听
kassiaaaa的博客
11-17 2796
爷爷组件 grandPa: provide() { return { treeDataObj: this.treeDataObj //传入一个可监听的对象 }; }, data() { const that = this; return { treeDataObj: { list: [] //传入一个可监听的对象 一个可监听的对象，那么其对象的 property 还是可响应的,实时监听改变 }, // 树no
框架技术Vue ---- watch监听、组件生命周期和数据共享、全局注册属性_vue生命周期watch
最新发布
2401_84433924的博客
05-03 1239
Vue3基础：组件化开发高级 ----- watch监听器，vue的生命周期，数据共享，配置axios前面简单介绍了组件基础，包括计算属性，动态绑定和props传值和自定义事件等，这个过程中，最复杂的css样式是直接使用的bootstrap进行渲染。
vue2 provide/inject watch 监控inject中值变化
冰雪为融的博客
09-21 1817
提供的值不是响应式的。这是Vue 2.x的设计，与Vue 3.x中的。提供的值保存在组件的响应式数据中，然后使用计算属性或。来监控这个响应式数据的变化。如果你希望在Vue 2.x中监控。提供的值是响应式的，可以直接被。注入的值默认情况下是不能被。在Vue 2.x中，使用。不同，Vue 3.x中的。inject使用的地方。
vue的provide和inject特性
hnnd123的博客
07-10 282
注意： provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 参考： vue的provide和inject特性 provide与inject实用技巧
Vue系列 =＞ Vue 中 provide/inject 的应用
Write less，do more
11-25 89
provide/inject <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./lib/vue.js">
13.（vue3.x+vite）组件间通信方式之provide与inject.rar
09-19
本教程将详细讲解Vue3.x中使用`provide`和`inject`进行组件间通信的方法。这两个API允许父组件向其所有子孙组件传递数据，而无需通过props逐层传递。 首先，`provide`是父组件定义可以提供给子孙组件的数据或方法的...
Vue通过provide inject实现组件通信
10-14
Vue.js的`provide`和`inject`是2.2.0版本引入的API，主要用于解决非父子组件间的通信问题，尤其是对于深度嵌套组件或跨级通信时特别有用。这两个选项一起使用，允许一个祖先组件向其所有子孙后代提供依赖，无论组件...
vue 开发中实现provide和inject的响应式数据监听
ZN_WEB的博客
12-25 803
// 父组件里 provide() { return{ isManual: { status :'none', } } }, // 改变provide里的对象值 this._provided.isManual.status ='0'; 子组件里正常使用 1 2 3 4 inject: ['isManual']...
组件通信+依赖注入、watch和computed区别
strawberry_bear0的博客
02-10 210
watch 主要用于监听特定属性的变化，以触发对应的回调函数，适用于处理一些异步或与后端交互的操作。 computed 主要用于根据data 中的属性计算出一个新的值，它会自动缓存和监听依赖的属性，适用于在模板中展示计算后的结果
vue2 provide和inject的使用
逆风优雅的博客
06-09 1866
provide提供inject注入两者组合一起使用：表示 父组件像子组件或孙组件或孙孙组件传值。官网链接：API — Vue.jsvue项目中使用：父组件：（provide是个方法，return要传递出去的值） 子组件： 子组件接收到父组件传的值后，使用时，和data中定义的值的使用方法一致。下面是在watch中的使用：...
vue3父子组件和provide、inject数据异步问题
03-07 783
vue3父组件数据是请求后端获取的数据时，就会出现数据不实时响应。因为在获取数据之前子组件已经加载，渲染完成了。所以这个时候接受父组件的异步数据不会实时更新。要解决这个问题就得用到watch监听函数了，利用watch监听父组件传过来的值，当值发生变化时，执行相应的操作。
Vue依赖注入的详细用法，1分钟说清利弊
黑客与画家
05-13 2956
背景 关于Vue组件的通讯方式相信大家能倒背如流 父子组件：通过prop，$emit，【$root，$parent，$children】 非父子组件：Vuex实现，父子层层传递、中央事务总线Bus，$ref 子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。应当节制地使用它们，其只是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信. Vue官网建议，在正常情况下，这两种方式已经能满足绝大多数甚至所有的业务需求，对于应用程序代
Vue 2.x折腾记 - (18) 用Vue的Inject Provide结合Event Bus来实现局部的状态维护
weixin_34279061的博客
04-18 199
前言 原型有个东西，看着是几个功能组件的组合体； 想拆分成对应的组件(全部写在一起是贼恐怖的事情)，又不想用Vuex这类来实现。 那最终的方案就是Vue的eventbus了, 这只是一种方案的实现。 具体业务请具体分析是否可以用这个来维护多组件数据的通讯！ 效果图 只展示部分功能，实际原型要复杂的多； 原型大体是这样的 实现原理 其实就是各个组件独立维护自己的状态，组件的默认值从外部传入； 而...
组合式API中的watch、生命周期函数、父子通信、模板引用以及provide和inject跨层传递
m0_73805336的博客
12-10 491
侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听。
vue中provide和inject的使用
HOMEXS的博客
09-16 422
vue中provide和inject的使用
vue 中provide inject的响应式监听解决办法 简单
前端一线搬运工的博客
01-11 8230
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 所以传值传对象即可 provide(){ return { provObj: { uuidList:{} } } }, this._provided.provObj.uuidList = r...
vue组件通信provide/inject
10-10
Vue组件通信的provide和inject是一种高级的父子组件通信方式。通过provide选项，父组件可以提供数据给所有的子孙组件，然后子孙组件可以通过inject选项来注入这些数据。 具体使用方法如下： 在父组件中，使用provide选项来提供数据： ```javascript provide() { return { data: this.data }; } ``` 在子组件中，使用inject选项来注入数据： ```javascript inject: ['data'] ``` 这样子组件就可以直接访问父组件提供的数据了。 需要注意的是，provide和inject并不是响应式的，也就是说，当提供的数据发生变化时，子组件不会重新渲染。如果需要响应式的数据通信，可以结合Vue的响应式系统（如data、computed、watch）来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值