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

  • 相关阅读:
    入职一家新公司
    简单的线性数据比较
    python编程导论读书笔记【4】终章
    Hadoop构建数据仓库实践读书笔记【3】__数据仓库设计基础
    清北最后冲刺 张浩威 吃鱼
    新汉诺塔
    小朋友的数字
    硬币购物
    HH的项链
    求逆序对 && 逆序对数列
  • 原文地址:https://www.cnblogs.com/-roc/p/9933229.html
Copyright © 2011-2022 走看看