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>
巴特西

vue.js通讯----父亲拿儿子的数据

最新文章

热门文章
