Vue入门七、父子组件间通讯

心已赠人 2022-01-16 20:00 274阅读 0赞

#### 一、父子组件通讯 ####

父传子：  
1、父用子的时候通过属性传递  
2、子要声明props:\['属性名'\]接收  
3、子组件template中直接用

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script type="text/javascript" src="vue.js"></script>
    <div id="app"></div>
    <script type="text/javascript">
        // 父传子
        var child = {
            template: `
                <div>我是子组件
                {
        {sendToChild}}
                </div>
            `,
            props: ['sendToChild']
        }
        var parent = {
            template: `
                <div>我是父组件
                    <child sendToChild="send"></child>
                </div>
            `,
            components: {
                child
            }
        }
        new Vue({
            el: '#app',
            template: `
                <div>
                    <parent></parent>
                </div>
            `,
            components: {
                parent
            }
        })
    </script>
    </body>
    </html>

--------------------

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script type="text/javascript" src="vue.js"></script>
    <div id="app"></div>
    <script type="text/javascript">
        // 父传子
        var child = {
            template: `
                <div>我是子组件
                {
        {sendToChild}}
                </div>
            `,
            props: ['sendToChild']
        }
        var parent = {
            template: `
                <div>我是父组件
                    <child v-bind:sendToChild="send"></child>
                </div>
            `,
            components: {
                child
            },
            data() {
                return {
                    send:
                        {name: 'zhangsan', age: 12}
                }
            }
        }
        new Vue({
            el: '#app',
            template: `
                <div>
                    <parent></parent>
                </div>
            `,
            components: {
                parent
            }
        })
    </script>
    </body>
    </html>

子传父：[br/>1、子组件里通过this.$emit('自定义事件名','变量1','变量2')触发  
2、父组件里通过@自定义事件名='事件名'监听  
this.$emit('hellobaba','给你带个苹果','给你带个梨')  
<child @hellobaba="myaccept"></child>][br_1_this._emit_1_2_ 2_ this._emit_hellobaba_ _child _hellobaba_myaccept_child]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script type="text/javascript" src="vue.js"></script>
    <div id="app"></div>
    <script type="text/javascript">
        // 子传父
        var child = {
            template: `
                <div>我是子组件
                    <button @click="sendToParent">点我送礼物给爸爸</button>
                </div>
            `,
            methods:{
                sendToParent(){
                    // 子传父表达式this.$emit('父组件接收事件名','参数1','参数2')
                    this.$emit('hellobaba','给你带个苹果','给你带个梨')
                }
            }
        }
        var parent = {
            // 父组件中@子传入事件名进行监听
            template: `
                <div>我是父组件
                    <child @hellobaba="myaccept"></child>
                    儿子给我：{
        {param1}},{
        {param2}}
                </div>
            `,
            components: {
                child
            },
            data(){
                return {
                    param1:'',
                    param2:''
                }
            },
            methods: {
                myaccept(val1,val2){
                    this.param1 = val1
                    this.param2 = val2
                }
            }
        }
        new Vue({
            el: '#app',
            template: `
                <div>
                    <parent></parent>
                </div>
            `,
            components: {
                parent
            }
        })
    </script>
    </body>
    </html>

转载于:https://blog.51cto.com/12012821/2399322

[br_1_this._emit_1_2_ 2_ this._emit_hellobaba_ _child _hellobaba_myaccept_child]: mailto:br/