vue中组件间的父子传值

一，父组件向子组件传值。
当父组件在引用子组件的时候，可以通过属性绑定（v-bind)的形式，把需要传递的子组件的数据，以属性绑定的形式，传递到子组件内部，提供子组件使用 。
html:

<div id="app">
    <com1 v-bind:parentmsg="msg"></com1>
</div>

js:

<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'父组件中的数据'
        },
        methods:{},
        components:{
            com1:{
                data(){//注意：子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的,比如:子组件通过ajax，请求回来的数据都可以放到data身上
                    return{
                        titlle:'123',
                        content:'dyy'
                    }
                },
                template:'<h1 @click="change">这是子组件————{{parentmsg}}</h1>',
                // 注意：组件中的所有props数据，都是通过父组件传递给子组件的
                props:["parentmsg"],
                //把父组件传递过的parentmsg属性，现在props数组里定义，这样数据才可以使用
                methods:{
                    change(){
                        this.parentmsg="数据被修改了"   
                    }
                }
            }
        }
        
    })
</script>

补充：
1，子组件中，默认访问不到父组件的data上的数据和methods方法。
2，props和data的区别：
①props通过父组件提供；props中的数据都是只读的无法重新赋值。
②data里的数据，不通过父组件传递过来的，而是子组件自身私有的。子组件里的数据可读可修改。

二：父组件把方法传递给子组件。
父组件向子组件传递方法，使用的是事件绑定机制：v-on,当我们自定义了一个事件属性之后，子组件就可以通过某些方式来调用传递的这个方法了。
html:

<div id="app">
        <!-- -->
        <com2 @fun="show"></com2>
    </div>
    <template id="tmp1">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="按钮" @click="myclick">
            <!-- 这是子组件的按钮，点击触发父组件传递过来的fun方法 -->
        </div>
    </template>

js:

<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var com2 = {
    template:'#tmp1',
    // 通过指定了一个id表示，要去加载这个指定id的template元素中的内容，当做组件的HTML结构
    methods:{
        myclick(){
            // emit意思是触发
            this.$emit("fun",2334)
        }
    }
}
var vm=new Vue({
    el:"#app",
    data:{},
    methods:{
        show(data){ //show(data)用于传参
            console.log("调用父组件的show方法"+data)
        }
    },
    components:{
        com2
    }

})
</script>

结果：