Vue系列 =＞ Vue 中 provide/inject 的应用

最新推荐文章于 2024-08-02 11:45:35 发布

不停喝水

最新推荐文章于 2024-08-02 11:45:35 发布

阅读量98

点赞数 1

分类专栏： # 【Vue2从基础到进阶】文章标签： vue html vuex

本文链接：https://blog.csdn.net/weixin_48200589/article/details/110136020

版权

【Vue2从基础到进阶】专栏收录该内容

64 篇文章 8 订阅

订阅专栏

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"></script>
</head>
<body>
  <div id="app">
    <!-- A嵌套B组件 B组件又嵌套C组件 -->
    <a-component></a-component>
  </div>
  <script>
 
  //组件A
  Vue.component('a-component', {
    data () {
      return {
        jc1: 1000,//数值
        name:'zs'
      }
    },
    // provide他相当于发射器，发送的内容，是通过返回值return出来
    provide () {
      this.jc1= Vue.observable({ //不使用这个方法时是死数据不会进行改变，使用了就是双向数据绑定的
            jc1:1000
        });

      return {
        jc2: this.jc1, //jc是你自己后面传递给其他子组件，其他组件的值    通过获取自己data中数据然后将其注入给后代
        names:this.name
      } 
    },
    template: `
    <div>
      我是A组件--{{jc1}}
      <button @click='handle'>点击我改变值</button>
      <b-component></b-component>
    </div>`,
    methods: {
      handle(){
        // this.jc1=100000000
        console.log(this)
        // console.log(this.jc1)
      }
    },
  })
  
  // 组件B
  Vue.component('b-component', {
    // 接收器，接受我们 provide函数返回的值
    inject: ['jc2','names'],
    template: `<div>
      我是B组件--{{jc2}}---{{names}}
      <c-component></c-component>
    </div>`
  })
  //组件C 
  Vue.component('c-component', {
    inject: ['jc2','names'],
    template: `<div>我是C组件--{{jc2}}---{{names}}</div>`
  })
  // Vue.config.productionTip = false
  Vue.config.silent = false
  var vm = new Vue({
    el: '#app'
  })
  </script>
</body>
</html>