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]
触发当前实例上的事件。附加参数都会传给监听器回调。