VUE父子组件之间的通信(简单入门案例)

最新推荐文章于 2022-12-10 11:34:22 发布

woshilaixuenima

最新推荐文章于 2022-12-10 11:34:22 发布

阅读量243

点赞数

分类专栏： VUE2 文章标签：入门案例 VUE 个人练习记录

本文链接：https://blog.csdn.net/woshilaixuenima/article/details/99837974

版权

VUE2 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一.父组件向子组件传递

这里的例子仅仅是将父组件里面定义好的数据在子组件中展示出来 , 在实际开发中 , 会先在父组件中请求后台数据 , 再将数据传到子组件中 .
在创建子组件的时候 , 有一个props属性 , 这个属性中可以定义你要在子组件中使用的变量 , 变量中的值将通过v-bind , 将父组件中的数据传入子组件

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <cpn v-bind:cmovies='movies' v-bind:cmes='mes'></cpn>
    </div>

	<!-- 子组件模板 -->
    <template id='cpn'>
        <div>
            <h2>{{cmes}}</h2>
            <ul>
                <li v-for='item in cmovies'>{{item}}</li>
            </ul>
        </div>
    </template>
    
    <script>
    //创建子组件
        const cpn = {
            template: '#cpn',
            props: {
                cmovies: {
                    type: Array,
                    // 对象或数组默认值必须从一个工厂函数获取
                    //default() {
                        //return {
                            //movies: ['了不起的盖茨比','阿甘正传','肖申克的救赎']
                        //}
                    //},
                    //为true代表必传项
                    required: true
                },
                cmes: String
            }
        }
		
        const app = new Vue({
            el: "#app",
            data:{
                mes: 'hello',
                movies: ['了不起的盖茨比','阿甘正传','肖申克的救赎']
            },
            //引用子组件
            components:{
                cpn
            }
        })
    </script>
</body>
</html>

二 . 子组件传向父组件

这是一个计数器的案例,通过点击子组件里面的按钮,改变父组件里面的值.
通常子组件向父组件传值 , 是通过父组件监听子组件通过 $emit() 发射出来的事件和值来实现
在创建子组件的时候 , 通过click事件(可以是其他事件)将自定义的事件名和变量发射出去 ,
那么在使用自定义标签的时候 , 就能使用自定义的事件名去调用父组件中定义的方法 ,
这样父组件方法就能获取到数据了

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!--父组件模板-->
    <div id='app'>
        <h2>{{counter}}</h2>
        <cpn @addclick='add' @subclick='sub'></cpn>
    </div>

	<!--子组件模板-->
    <template id='temp'>
        <div>
            <button @click='addclick'>+</button>
            <button @click='subclick'>-</button>
        </div>
    </template>
    <script>
    	//创建子组件
        const cpn = {
            template: '#temp',
            data() {
                return {
                    num: 2
                }
            },
            methods: {
            	//发射事件和数据
                addclick() {
                    this.$emit('addclick',this.num)
                },
                subclick() {
                    this.$emit('subclick')
                }
            },
        }

        const app = new Vue({
            el: '#app',
            data() {
                return {
                    counter: 0
                }
            },
            //引入子组件
            components: {
                cpn
            },
            methods: {
                add(num){
                    this.counter = this.counter + num
                },
                sub(){
                    this.counter--
                }
            }
        })
    </script>
</body>
</html>

woshilaixuenima

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE父子组件之间的通信(简单入门案例)

一.父组件向子组件传递这里的例子仅仅是将父组件里面定义好的数据在子组件中展示出来 , 在实际开发中 , 会先在父组件中请求后台数据 , 再将数据传到子组件中 .在创建子组件的时候 , 有一个props属性 , 这个属性中可以定义你要在子组件中使用的变量 , 变量中的值将通过v-bind , 将父组件中的数据传入子组件<!DOCTYPE html><html lang="e...
复制链接

扫一扫