vue之子父组件通信

在vue之中,父子组件通信的方法如下图
vue之子父组件通信_第1张图片
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>

显示结果如下
vue之子父组件通信_第2张图片

你可能感兴趣的:(Vue)