zoukankan      html  css  js  c++  java
  • vue.js通讯----父亲拿儿子的数据

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--父亲拿儿子的属性,通过的就是发布订阅,父亲声明一个方法,儿子触发-->
    <div id="app"></div>
    </body>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        //实例化一个Vue函数
        let vm=new Vue({
            //child 是儿子 触发了自己的一个方法,绑定了父亲的一个函数方法
            template:'<div><child @childs="say"></child></div>',
            //方法挂载
            methods:{
                //父亲的一个方法
                say(data){
                   console.log(data);
                }
            },
            //定义一个儿子组件
            components:{
                //儿子名字
                child:{
                    //事件和数据初始化之后
                    created(){
                        //儿子发射一个方法 传递自己的数据
                        this.$emit('childs',this.msg);
                    },
                    template:'<div>子</div>',
                    data(){
                        return {
                            msg:"我饿了"
                        }
                    },
    
                }
            },
        }).$mount("#app"); //手动将vue挂载在#app标签上
    </script>
    </html>
  • 相关阅读:
    表格的增删改查
    选择省份时,自动显示对应省份的城市
    弹框提示用户输入
    dom
    css基础
    HTML基础
    B
    poj 1840 Eqs
    hdu 1166 敌兵布阵(线段树)
    poj 2586 Y2K Accounting Bug
  • 原文地址:https://www.cnblogs.com/null11/p/7478127.html
Copyright © 2011-2022 走看看