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

  • 相关阅读:
    Android 黑科技保活实现原理揭秘
    Flutter +携程=?
    图解设计模式-Prototype模式
    图解设计模式-Singleton模式
    比较B-tree索引与Hash索引
    类元数据Class Metadata
    DriverManager类
    XMLMapperBuilder类
    PooledDataSource类
    Java并发编程的艺术(笔记)
  • 原文地址:https://www.cnblogs.com/-roc/p/9933229.html
Copyright © 2011-2022 走看看