zoukankan      html  css  js  c++  java
  • vue 父子传值

    父组件 

    <my-compo c="c"></my-compo>

    动态传值

    <my-compo v-bind:c="c"></my-compo>

    子组件 props接收   调用时候 和react不同 不用this.props.c  直接使用{{c}}

    import Vue from "vue";
    
    const MyCompo = Vue.extend({
        props : ["c"],
        data : function(){
            
        },
        methods : {
            
        }
    });
    
    export default MyCompo;

    此时如果 子组件 改变 props值    

    父组件在  

    默认情况下不变!

    如果 需要改变   

    方法一:  .sync  (vue2 移除)

    <my-compo v-bind:c.sync="c"></my-compo>    

    //注意!! vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。
    //从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

    方法二:  传 引用类型值  (不推荐)

    import Vue from "vue";
    import MyCompo from "./components/MyCompo.js";
    
    new Vue({
        el : "#app",
        data : {
            c : 333,
            d : {
                v : 8888
            }
        },
        components : {
            "my-compo" : MyCompo
        }
    });

     方法三:   类似 react  父组件向子组件传函数  通过子组件调用运行此函数   改变父组件值   推荐)

    父组件

    <my-compo v-on:changea="changea"></my-compo>

    ******************************************************

    import Vue from "vue";

    import MyCompo from "./MyCompo.vue";

     

    new Vue({

        el : "#app",

        data : {

           a : 100

        },

        components : {

           MyCompo

        },

        methods : {

           changea : function(number){

               this.a += number;

           }

        }

    });

    子组件 

    <style>
        
    </style>
    
    <template>
        <div>
            <h1>我是子组件</h1>
            <button v-on:click="changeAemit">按我</button>
        </div>
    </template>
    
    <script>
        export default {
            methods : {
                changeAemit : function(){
                    this.$emit("changea",8);
                }
            }
        }
    </script>

    $emit
    参数:
    
    {string} eventName
    [...args]
    触发当前实例上的事件。附加参数都会传给监听器回调。
  • 相关阅读:
    MyBatis 核心配置综述之 ResultSetHandler
    MyBatis 核心配置综述之 ParameterHandler
    MyBatis 核心配置综述之StatementHandler
    高等数学——手撕牛顿莱布尼茨公式
    用二分法优化动态规划——实现快速决策
    召回、精确、准确,这些让人头大的概念一文全讲清楚
    Python——详解__slots__,property和私有方法
    LeetCode50——一题学会快速幂算法
    Golang——详解Go语言代码规范
    spark——详解rdd常用的转化和行动操作
  • 原文地址:https://www.cnblogs.com/caoleyun/p/12692339.html
Copyright © 2011-2022 走看看