Vue:组件父子通信

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_33738555

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/c491873412/p/7458491.html

示例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <alert msg="Yooooooooo Wooooooooo"></alert>
</div>



<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
    Vue.component('alert',{
        template:'<button @click="on_click()">弹弹弹</button>',
        props:['msg'],     //保存自定义特征     
        methods:{
            on_click:function () {
                alert(this.msg)
            }
        }
    });
    new Vue({
        el:'#app'
    })
</script>
</body>
</html>

示例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <user username="xiaobai"></user>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
    Vue.component('user',{
        template:'<a :href="\'user\' + username">@{{username}}</a>',
        props:['username'],
        methods:{

        }
    });
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/c491873412/p/7458491.html