Vue框架——子组件给父组件传值

最新推荐文章于 2023-12-28 21:01:57 发布

程序员陈_明勇

最新推荐文章于 2023-12-28 21:01:57 发布

阅读量298

点赞数 1

分类专栏： Vue框架学习文章标签： vue html js vue.js vue子组件给父组件传值

本文链接：https://blog.csdn.net/weixin_44604586/article/details/114042298

版权

Vue框架学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

子组件给父组件传值

子组件向父组件传值基本用法
子组件向父组件传值（带参数）

子组件向父组件传值基本用法

props 传递数据原则：单向数据流

要向从子组件中向父组件传值，需要进行两个步骤：

① 子组件通过自定义事件向父组件传递信息

Vue.component('small-item', {
    data: function() {
        return {
            msg: '子组件的值'
        }
    },
    template: `
	<div><button @click="$emit('enlarge-text')">增大父组件里的文字字号</button></div>
`
});

点击按钮之后，触发$emit()方法，此方法用于触发自定义事件

② 父组件监听子组件的事件

<div id="app">
    <div :style="{fontSize: fontsize + 'px'}">{{pmsg}}</div>
    <small-item @enlarge-text="handle"></small-item>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        pmsg: '父组件的值',
        fontsize: 12
    },
    methods: {
        handle: function() {
            this.fontsize += 5;
        }
    }
});

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子组件向父组件传值</title>
</head>

<body>
    <div id="app">
        <div :style="{fontSize: fontsize + 'px'}">{{pmsg}}</div>
        <small-item @enlarge-text="handle"></small-item>
    </div>
    <script src="js/vue.js "></script>
    <script>
        Vue.component('small-item', {
            data: function() {
                return {
                    msg: '子组件的值'
                }
            },
            template: `
                <div><button @click="$emit( 'enlarge-text') ">增大父组件里的文字字号</button></div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件的值',
                fontsize: 12
            },
            methods: {
                handle: function() {
                    this.fontsize += 5;
                }
            }
        });
    </script>
</body>

</html>

子组件向父组件传值（带参数）

基于上述案例，对某些地方做改变

Vue.component('small-item', {
    data: function() {
        return {
            msg: '子组件的值'
        }
    },
    template: `
	<div><button @click="$emit('enlarge-text', 5)">增大父组件里的文字字号</button></div>
`
});

在 $emit() 方法里传递一个 5

<div id="app">
    <div :style="{fontSize: fontsize + 'px'}">{{pmsg}}</div>
    <small-item @enlarge-text="handle($event)"></small-item>
</div>

通过 $event 获取传递的值

var vm = new Vue({
    el: '#app',
    data: {
        pmsg: '父组件的值',
        fontsize: 12
    },
    methods: {
        handle: function(val) {
            this.fontsize += val;
        }
    }
});

添加 val 参数

程序员陈_明勇

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue框架——子组件给父组件传值

子组件给父组件传值子组件向父组件传值基本用法子组件向父组件传值（带参数）子组件向父组件传值基本用法props 传递数据原则：单向数据流要向从子组件中向父组件传值，需要进行两个步骤：① 子组件通过自定义事件向父组件传递信息Vue.component('small-item', { data: function() { return { msg: '子组件的值' } }, template: ` <div&gt
复制链接

扫一扫