zoukankan      html  css  js  c++  java
  • vue组件传值的三种方式,文字版解释

    父传子:
    当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如:
    <Child v-bind:parentToChild="parentMsg"></Child>),并在data中声明;然后在子组件中通过props接收,接收时,用属性名接收(如:props:["parentToChild"])。


    子传父:
    法一:

    当子组件在父组件中当标签使用的时候,给子组件添加一个自定义方法(如:
    <Child v-on:childToParentMsg="showChildToParentMsg" ></Child>),父组件通过methods中调用方法接收传过来的值(如:methods: {
    showChildToParentMsg:function(data){
    alert("父组件显示信息:"+data)
    }
    },),
    子组件中通过this.$emit("自定义方法名",传的值) (如:
    this.$emit("childToParentMsg", "子组件向父组件传值");)

    法二:(插槽作用域)

    在子组件标签中插入 template标签,并给template 给属性scope="",
    如:
    <template scope="data">
    <h2>{{data.mytitle}}</h2>
    </template>
    在子组件内部的插入 slot 中添加自定义属性 如 <slot :mytitle="message"></slot>


    非父子:
    法一:创建公共vue对象,会调用很多没用的方法(只用$on $emit $off $once),
    法二:封装$on $emit $off 。并在main.js中导入。
    import center from "./observer"
    vue.prototype.observer = center

  • 相关阅读:
    学生宿舍水电管理系统 产品需求评审(用户故事)
    nyoj 14-会场安排问题 (贪心)
    好看的鼠标hover效果
    JavaScript-三种弹窗方式
    博客园美化夜间模式
    js写个小时钟
    js获取时间,循环执行任务,延迟执行任务
    Bzoj1103 [POI2007]大都市meg
    POJ2155 Matrix
    POJ3625 Building Roads
  • 原文地址:https://www.cnblogs.com/-roc/p/9933229.html
Copyright © 2011-2022 走看看