vue基础

最新推荐文章于 2024-08-07 14:18:20 发布

yzbyf

最新推荐文章于 2024-08-07 14:18:20 发布

阅读量358

点赞数 10

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yzbyf/article/details/134631914

版权

子组件向父组件传值

使用 $emit() 触发自定义事件，并且可以传递参数

子组件中的操作
this.$emit(‘event-name’,args参数)

过程：
子组件中执行 this. $e mi t (), 触发了绑定在子组件上的 e v e n t - nam e, 然后执行父组件的接收方法，父组件的接收方法接收一个默认的参数，参数的值是子组件中 t hi s .$ emit传递的参数，这样通过参数的形式，把数据从子组件传递到父组件

$parent 获取当前组件的父组件，如果没有父组件则返回null
$root 获取当前组件的根组件，如果当前组件没有父组件，则返回当前组件

<body>
    <div id="app">
        <h1>{{info}}</h1>
        <button @click="">点击++</button>
        <son @abc="changeInfo"></son>
    </div>
</body>
</html>
<template id="son">
    <div class="wp">
        <h1>{{msg}}</h1>
        <button @click="pass">点击传递给父组件</button>
        <button @click="getFu">点击获取父组件</button>
     </div>
</template>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';

let son={
    data(){
        return{
            msg:'道不轻传'
        }
    },
    template:'#son',
    methods:{
        pass(){
            // $emit 在当前组件触发一个自定义事件。任何额外的参数都会传递给事件监听器的回调函数。
            this.$emit('abc',this.msg);
        },
        //通过获取父组件的实例传递数据
        getFu(){
            // this.$parent.changeInfo(this.msg);
            this.$root.changeInfo(this.msg);
        }
    }
};
createApp({
    data(){
        return{
            info:'稻香'
        }
    },
    components:{
        son
    },
    methods:{
        changeInfo(data){
            console.log('触发方法',data);
            this.info=data;
        }
    }
}).mount('#app');
</script>

父子组件传值

<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <hr/>
        <abc @pass="getData" :info="msg"></abc>
       
    </div>
</body>
</html>
<template id="abc">
    <h1>{{info}}</h1>
    <button @click="change">点击传递给父组件</button>
</template>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
let abc={
    template:'#abc',
    props:['info'],
    data(){
        return{
            str:'夕阳无限好'
        }
    },
    methods:{
        change(){
            //触发pass事件，传递 str 数据
            this.$emit('pass',this.str);
        }
    },
};

createApp({
    data(){
        return{
          msg:'我看青山如是'  
        }
    },
    methods:{
        //data默认参数，是子组件通过 $emit传递过来的数据
        getData(data){
            this.msg=data;
        }
    },
    //从外部引入组件
    components:{
        abc
    }
}).mount('#app');
</script>

非父子关系的组件传值

<body>
    <div id="app">
        <h1>摇滚不死</h1>
        <son1></son1>
        <son2></son2>
    </div>
</body>
</html>
<template id="son1">
    <div class="son1">
        <h2>子组件1</h2>
        <h4>{{msg}}</h4>
        <button @click="pass">点击传递给子组件2</button>
    </div>
</template>

<template id="son2">
    <div class="son2">
        <h2>子组件2</h2>
        <h4>{{info}}</h4>
    </div>
</template>
<!-- 引入 mitt 插件 的js -->
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
//引入mitt实例
let bus=mitt();
console.log(bus);

// let bus=createApp();
// console.log(bus);

//声明两个组件
let son1={
    template:'#son1',
    data(){
        return{
            msg:'假行僧'
        }
    },
    methods:{
        pass(){
            //执行 mitt 实例中的 emit() 方法，来触发自定义事件，并且传递参数
            bus.emit('abc',this.msg);
        }
    }
};
let son2={
    template:'#son2',
    data(){
        return{
            info:'一块红布'
        }
    },
    mounted(){
         /*执行 mitt 实例中的 on() 方法，来监听自定义事件是否被触发，如果被触发，则执行回调函数，
         回调函数默认传入一个参数，该参数的值即为 通过 emit 触发事件传递的数据*/
        bus.on('abc',data=>{
            this.info=data;
        });
    }
};
createApp({
    data(){
        return{

        }
    },
    components:{
        son1:son1,
        son2:son2
    }
}).mount('#app');
</script>

yzbyf

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
vue基础

然后执行父组件的接收方法，父组件的接收方法接收一个默认的参数，参数的值是子组件中。emit传递的参数，这样通过参数的形式，把数据从子组件传递到父组件。this.$emit(‘event-name’,args参数)使用 $emit() 触发自定义事件，并且可以传递参数。子组件中执行 this.触发了绑定在子组件上的。
复制链接

扫一扫