vue 系列组件传值父向子子向父兄弟传值

最新推荐文章于 2022-09-20 14:32:38 发布

Mic_start

最新推荐文章于 2022-09-20 14:32:38 发布

阅读量129

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_37574218/article/details/105969713

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

组件传值之父组件向子组件传值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{msg}}
    <menu-boy title="父组件传值"></menu-boy>
    <menu-boy :title="ftitle"></menu-boy>
    <menu-boy :title="ftitle" content="文本"></menu-boy>
</div>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    Vue.component('menu-boy',{
        props:['title','content'],
        data: function () {
            return{
                msg:'子组件'
            }
        },
        template:'<div>{{msg  }}--{{title}} --{{content}}</div>'
    })
    const vm= new Vue({
        el:"#app",
        data:{
            msg:'父组件',
            ftitle:'父组件动态传值'
        },
    })
</script>
</body>
</html>

对应视频：子向父

组件传值之子组件向父组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <menu-once :title="msg" @change-text="handle($event)"></menu-once>
</div>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    Vue.component('menu-once',{
        props:['title'],
        template: `<div>{{title}}<button @click="$emit('change-text','修改数据')">按钮</button></div>`
    })
    const vm= new Vue({
        el:"#app",
        data:{
            msg:"父组件"
        },
        methods:{
            handle(val){
                this.msg = val;
            }
        }
    })
</script>
</body>
</html>

对应视频：子组件向父组件传值

组件传值之兄弟组件之间传值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <mr-tom></mr-tom>
    <mr-mic></mr-mic>
</div>
<script src="lib/vue.js"></script>
<script type="text/javascript">

    //事件中心
    let vue = new Vue();
    Vue.component('mr-tom',{
        data:function () {
            return{
                msg:'mr-tom'
            }
        },
        template:`<div>
                <div>{{msg}}</div>
                <button @click="handle">点击</button>
                </div>`,
        methods: {
            handle(){
                //触发兄弟组件的事件
                vue.$emit('mic-event','tom来了')
            }
        },
        mounted(){
            //监听事件
            vue.$on('tom-event',(val)=>{
                this.msg=val;
            })
        }
    });

    Vue.component('mr-mic',{
        data:function () {
            return{
                msg:'mr-mic'
            }
        },
        template:`<div>
                <div>{{msg}}</div>
                <button @click="handle">点击</button>
                </div>`,
        methods: {
            handle(){
                vue.$emit('tom-event','mic来了')
            }
        },
        mounted(){
            //监听事件
            vue.$on('mic-event',(val)=>{
                this.msg=val;
            })
        }
    })
    const vm= new Vue({
        el:"#app",
        data:{
        },
        methods:{
        }
    })
</script>
</body>
</html>

对应视频：兄弟组件之间传值

Mic_start

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 系列组件传值父向子子向父兄弟传值

组件传值之父组件向子组件传值：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> {{...
复制链接

扫一扫