Vue.js 父子组件相互传递数据

父传子 : 子组件接收变量名=父组件传递的数据
如：:f-cmsg="fmsg" 注意驼峰问题
子传父：@子组件关联的方法名 = 父组件接受的方法名
如：@func="getmsg"
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>父子组件相互传递数据</title>
        <link rel="icon" sizes="any" href="../img/2.png" >
        <!--<link rel="icon" sizes="any" href="../img/2.png">-->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style type="text/css">
            h4{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p>父组件</p>{{fmsg}}<br/>
            子组件传过来的元素:<h4>{{zCmsg}}</h4>
            <!--父传子 :接受变量名  注意驼峰问题   :接收变量名=传递的数据 如：:f-cmsg="fmsg"-->
            <!--子传父：@关联方法名 = 接受方法名  如：@func="getmsg"-->
            <re :f-cmsg="fmsg" @func="getmsg"></re>
        </div>
        <template id="t1">
            <div>
                <!--通过点击事件触发发送父标签的信息-->
                <button @click="setmsg">发送给父组件的数据</button>
                <p>子组件</p>{{zmsg}}<br/>
                父组件传过来的元素:<h4>{{fCmsg}}</h4>
            </div>
            
        </template>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#box",
                data:{
                    fmsg:"我是父标签的数据",
                    zCmsg:""
                },
                methods:{
                    //接受子数据的方法  括号中为传递过来的参数 ,个数由传递参数来决定
                    getmsg:function(m){
                        this.zCmsg=m;
                    },
                },
                //局部组件
                components:{
                    re:{
                        template:"#t1",
                        //接受父标签传递过来的数据 【】中为传递过来的数据可直接使用
                        props:['fCmsg'],
                        data:function(){
                            return {
                                zmsg:"我是子标签的数据",
                            }
                        },                        
                        methods:{
                            //点击事件
                            setmsg:function(){
                                //this.$emit(关联方法，传递数据1...)
                                this.$emit("func",this.zmsg);
                            },
                        }
                    }
                }
            });
        </script>
    </body>
</html>
View Code