vue基础扩展7--provide和reject

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>vue基础扩展7--provide和reject</title>
</head>

<body>
  <script>
    // 1、基本使用范例
    var Provider = {
      data() {
        return {
          x: 'test'
        }
      },
      // 父组件可以直接使用对象，对象包含需要提供的key：“value”
      provide: {
        foo: 'bar'
      },
      // 可是设置provide 为一个函数，函数返回一个provide属性，this指向vue实例，所以可以调用组件data里的值得
      provide() {
        return {
          a: this.x
        }
      },
    };

    // 子组件注入 'foo'
    var Child = {
      // inject可以是一个数组，数组里包含需要注入的key的字面量
      inject: ['foo'],
      // inject 可以是一个对象
      inject: {
        foo: 'foo'
      },
      // inject 可以设置默认值，所以可以inject的指可以在provide里不存在
      inject: {
        foo: { default: 'default value' }
      },
      // default 值也可是一个有返回值的函数
      inject: {
        foo: { default: () => { return [1, 2, 3] } }
      },
      // 完整的带默认值的写法, a 是provide中提供的key的字面量
      inject: {
        foo: {
          from: 'a',
          default: 'default value'
        }
      },
      created() {
        console.log(this.foo) // => "bar"
      }
    };
  </script>

  <div id="app">
    <parent>
      <child></child>
    </parent>
  </div>

  <script>
    // 2、演示使用：
    // 父级组件parent提供msg1 属性,子组件注入msg1属性，
    var parent = {
      data() {
        return {
          msg: 'hello'
        }
      },
      provide: {
        msg1: 'hello1',
      },
      template: `<ul><slot></slot></ul>`,
    }
    var child = {
      inject: {
        msg1: {
          from: 'msg1',
          default: 'default value'
        },
        root: 'root'
      },
      created() {
        console.log(this.msg1) // => "hello1"
        console.log(this.root) // hello
      },
      template: `<li> {
   
   {this.msg1}} </li>`,
    }

    // Vue.component('parent',parent);
    // Vue.component('child',child);

    var app = new Vue({
      el: '#app',
      components: { parent, child }
    });

  </script>
vue基础扩展7--provide和reject

猜你喜欢
