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

  • 相关阅读:
    Canvas与Paint的0基础使用
    PHP经常使用功能
    java枚举在android项目应用
    POJ1833 &amp; POJ3187 &amp; POJ3785 next_permutation应用
    usb芯片调试经验
    Equals和==比較
    JSTL标准标签库具体解释
    零基础学python-3.3 标识符
    用react native 做的一个推酷client
    Linux异常关机后,Mysql启动出错ERROR 2002 (HY000)
  • 原文地址:https://www.cnblogs.com/-roc/p/9933229.html
Copyright © 2011-2022 走看看