vue之子父组件通信

最新推荐文章于 2023-04-19 15:51:34 发布

微微笑再加油

最新推荐文章于 2023-04-19 15:51:34 发布

阅读量157

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/chd_sun/article/details/104394322

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在vue之中,父子组件通信的方法如下图
在这里插入图片描述
1.父组件向子组件传值(props)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	//父组件模板
    <div id="app">
        <!-- 使用v-bind绑定属性才能传递过来对应的值  movies：父组件的属性  cmives：子组件定义接收的变量名-->
        <cpn :cmives="movies"></cpn>
    </div>
    <!-- 子组件的模板(分离式写法) -->
    <template id="cpn">
        <div>
            {{cmives}}
        </div>
    </template>
    <script src="../vue.js/vue.js"></script>

    <script>
        //父传子:props
        //子组件
        const cpn= { 
            template: '#cpn',
            props:['cmives'],
        }
        //父组件
        const app=new Vue({
            el: '#app',
            data:{
                message: '你喜欢',
                movies:['海贼王','火影','海尔']
            },
            components :{
            //注册子组件(语法糖省略写法)
                cpn
        }
        })
    </script>

</body>
</html>

其中props传值在写法还有如下几种(上文中是关于数组的写法)

//1.类型限制
	//props定义成一个对象
	props：{
		cmovies：Array,
		cmessage:String
	}
//2.提供默认值
	props：{
		cmessage:{
			限制类型//
			type:String,
			//默认值
			default:'aaaa'，
			//必须属性（当required:true时，使用组件必须传递cmessage值，否则报错）
			required:true
		}
	}

2.子组件向父组件传值(emit)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 父组件的模板 -->
    <div id="app">
        <!-- 3.父组件监听子组件发射的数据 
        itemclick:子组件发射的属性名
        cpnClick：父组件接收的方法
        -->
       <cpn v-on:itemclick="cpnClick"></cpn>
    </div>

    <!-- 子组件的模板(分离式写法) -->
    <template id="cpn">
        <div>
            <!-- 1.子组件的按钮触发点击事件 -->
           <button v-for="item in buttenList" @click="btnClick(item)">{{item.name}}</button>
        </div>
    </template>
    <script src="../vue.js/vue.js"></script>

    <script>
        //子组件
        const cpn= { 
            template: '#cpn',
            data(){
                return {
                    //子组件的数据
                    buttenList: [
                    {id: 'aaa', name: '第一'},
                    {id: 'bbb', name: '第二'},
                    {id: 'ccc', name: '第三'},
                    {id: 'ddd', name: '第四'},
                ]
                }
               
            },
            methods:{
                //子组件的点击事件
                btnClick(item){
                    //2.子组件发射事件
                    this.$emit('itemclick',item)
                }
            }

        }
        //父组件
        const app=new Vue({
            el: '#app',
            data:{
                message: '你喜欢',
            },
            components :{
                cpn
            },
            methods:{
                //4.父组件的接收方法
                cpnClick(item){
                    //输出子组件传递到父组件的数据
                    console.log('cpnClick',item);
                }
            }
        })
    </script>

</body>
</html>

显示结果如下
在这里插入图片描述

微微笑再加油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue之子父组件通信

在vue之中,父子组件通信的方法如下图1.父组件向子组件传值(props)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
复制链接

扫一扫