您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 开发 > WEB开发 >
    Vue组件间通讯六种方式(残缺版)(2)
    时间:2019-05-17 12:18 来源:网络整理 作者:网络 浏览:收藏 挑错 推荐 打印

    $attrs:包含了父作用域中不被 prop 所辨认 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含一切父作用域的绑定 (class 和 style 除外),并且可以经过 v-bind="$attrs" 传入外部组件。通常配合 interitAttrs 选项一同运用。

    $listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事情监听器。它可以经过 v-on="$listeners" 传入外部组件

    接上去我们看个跨级通讯的例子:

    // index.vue 

    <template> 

      <div> 

        <h2>浪里行舟</h2> 

        <child-com1 

          :foo="foo" 

          :boo="boo" 

          :coo="coo" 

          :doo="doo" 

          title="前端工匠" 

        ></child-com1> 

      </div> 

    </template> 

    <script> 

    const childCom1 = () => import("./childCom1.vue"); 

    export default { 

      components: { childCom1 }, 

      data() { 

        return { 

          foo: "Javascript"

          boo: "Html"

          coo: "CSS"

          doo: "Vue" 

        }; 

      } 

    }; 

    </script> 

    // childCom1.vue 

    <template class="border"

      <div> 

        <p>foo: {{ foo }}</p> 

        <p>childCom1的$attrs: {{ $attrs }}</p> 

        <child-com2 v-bind="$attrs"></child-com2> 

      </div> 

    </template> 

    <script> 

    const childCom2 = () => import("./childCom2.vue"); 

    export default { 

      components: { 

        childCom2 

      }, 

      inheritAttrs: false, // 可以封锁自动挂载到组件根元素上的没有在props声明的属性 

      props: { 

        foo: String // foo作为props属性绑定 

      }, 

      created() { 

    (责任编辑:admin)