zoukankan      html  css  js  c++  java
  • vue组件父子组件之间传递数据

    举个栗子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../Vue.js"></script>
        <template id="tpl1">
            <h3>我是父组件  -->{{msg}}</h3>
            <bbb @child-data="get"></bbb>
        </template>
        <template id="tpl2">
            <input type="button" value="发送" @click="send()">
            <h4>我是子组件  -->{{msg2}}</h4>
        </template>
        <script>
            //子组件取父组件的数据
            window.onload = function () {
                new Vue({
                    el:"#div",
                    //局部小组件
                    components:{
                        'aaa':{
                            data: function () {
                                return {
                                    msg:'我是父组件的数据'
                                }
                            },
                            template:'#tpl1',
                            methods: {
                              get: function (m) {
                                  this.msg = m;
                              }
                            },
                            components:{
                                'bbb':{
                                    data: function () {
                                        return {
                                            msg2: '我是子组件'
                                        }
                                    },
                                    template:"#tpl2",
                                    methods:  {
                                        send:function (){
                                            this.$emit('child-data',this.msg2);
                                        }
                                    }
                                }
    
                            }
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
    
    <div id="div">
        <aaa></aaa>
    </div>
    </body>
    </html>
  • 相关阅读:
    cygwin mysql forget root password
    emacs 复制粘贴的正确姿势
    yarn
    mysql 和 postgresql 区别
    hdfs
    spark
    hbase
    kafka
    flume
    java jar
  • 原文地址:https://www.cnblogs.com/4thmonth/p/7163334.html
Copyright © 2011-2022 走看看