vue父子组件的通信-前端开发-Javascript-我要学365体育投注人人小站_365体育投注打不开_皇冠365体育投注网址_我要学365体育投注人人小站_365体育投注打不开_皇冠365体育投注网址是一个面向开发者的知识分享网站 365体育投注人人小站_365体育投注打不开_皇冠365体育投注网址
我的位置:首页 > 前端开发>Javascript

vue父子组件的通信

时间:2019-11-08 22:38:00 来源:互联网 作者: 神秘的大神 字体:

 

一、父组件向子组件传递数据

1、首先形成父子组件关系





    Document




    

2、在子组件中定义一个props,定义两个变量 (messages) (moviess)

props: ['messages', 'moviess']

3、使用子组件时,用V-bind绑定两个变量(messages) (moviess),并且把父组件中的数据(message)(movies)传给这两个变量。

<cpn :messages="message" :moviess="movies">cpn>

****完整代码*****

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="../js/vue.js">script>
head>

<body>
    <div id="app">
        <cpn :messages="message" :moviess="movies">cpn>
        
    div>
    
    
    <template id="cpn">
        <div>
            <h2>{{messages}}h2>
            <ul>
                <li v-for="item in moviess">
                    {{item}}
                li>
            ul>
        div>
    template>
    <script>
        const cpn = {
            template: `#cpn`,
            // props: ['messages', 'moviess'],


            props: {
                // 1、类型限制
                // messages:Array,
                // moviess:String,

                // 提供一些默认值
                messages: {
                    type: String,
                    default: 'aaaa',
                    required: true
                },
                // 当使用组件的时候,没有绑定props中定义的变量,就会显示定义的默认值
                moviess: {
                    // 类型是对象或数组,默认值必需是一个函数。  
                    type: Array,
                    // default: []
                    default() {
                        return []
                    }
                }
            },
            data() {
                return {}
            },
            methods: {}

        }
        let vm = new Vue({
            el: '#app',
            data: () => ({
                message: '父组件的数据',
                movies: ['战狼1', '流浪地球', '攀登者'],

            }),
            components: {
                cpn
            }
        })
    script>
body>

html>

** props中补充写法

props: {
                // 1、类型限制
                // messages:Array,
                // moviess:String,

                // 提供一些默认值
                messages: {
                    type: String,
                    default: 'aaaa',
                    required: true
                },
                // 当使用组件的时候,没有绑定props中定义的变量,就会显示定义的默认值
                moviess: {
                    // 类型是对象或数组,默认值必需是一个函数。  
                    type: Array,
                    // default: []
                    default() {
                        return []
                    }
                }
            }

 二、子组件向父组件传数据

1、构成父子组件关系

 2、在子组件中自定义一个事件      作用:发射一个事件给父组件

<button v-for="item in categories" @click="btnclick(item)">{{item.name}}button>

 

            methods: {
                btnclick: function (item) {
                    // 发射事件:自定义事件
                    this.$emit('itemclick', item)
                }
            }

3、在父组件的模板中使用子组件中定义的事件 @itemclick="cpnclick"   并且在父组件创建一个新的事件 cpnclick 

<cpn @itemclick="cpnclick">cpn>
            methods: {
                cpnclick: function (item) {
                    console.log('cpnclick', item)
                }
            }

***完整代码***





    Document