Vue之父子组件的通信

<!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>
</head>
<body>
    <div id="app"></div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>

        // 声明子组件（子组件在前避免父组件找不到）
        /*
        子组件向父组件发送消息：需要通过事件，需要在子组件声明的时候通过某个
        事件来触发父组件自定义的事件，最后通过该父组件的自定义事件来处理消息
        */
        var Content = {
            template: `<div class='content'>我是子组件
                <p>我是从父组件接收到的消息： {{ mess }}</p>
                <button @click='sendF'>点击我，向父组件发送消息吧～</button>
            </div>`,
            props:['mess'],
            methods: {
                sendF() {
                    // 去触发父组件中自定义的事件
                    // 第一个参数是要触发父组件中事件的名字，第二个参数传入的值
                    this.$emit('reciveMe','10001010001');
                }
            }
        };
       
        /* 父组件向子组件发送消息：需要将要发送的消息
            与子组件的自定义属性相绑定;在声明子组件时用
            props:['自定义属性名']接收到发送过来的消息；
            然后此时子组件就可以利用该属性名使用该消息了
        */
        // 声明父组件
        var App = {
            template:`<div class='main'>我是父组件
            <Content v-bind:mess='msg'  @reciveMe='showMess'/>
            </div>`,
            data(){ 
                return {
                    msg: 'hi'
                } 
            },
            components: {
                Content
            },
            methods:{
                showMess(data){
                    alert('子组件向我发送了消息： ' + data);
                }
            }
        };


        new Vue({
            el: '#app',
            // 使用局部组件
            template: `
                <App />
            `,
            data:function(){
                return {}
            },
            // 挂载局部组件
            components: {
                App
            }
        });
    </script>
</body>
</html><!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>
</head>
<body>
    <div id="app"></div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>

        // 声明子组件（子组件在前避免父组件找不到）
        /*
        子组件向父组件发送消息：需要通过事件，需要在子组件声明的时候通过某个
        事件来触发父组件自定义的事件，最后通过该父组件的自定义事件来处理消息
        */
        var Content = {
            template: `<div class='content'>我是子组件
                <p>我是从父组件接收到的消息： {{ mess }}</p>
                <button @click='sendF'>点击我，向父组件发送消息吧～</button>
            </div>`,
            props:['mess'],
            methods: {
                sendF() {
                    // 去触发父组件中自定义的事件
                    // 第一个参数是要触发父组件中事件的名字，第二个参数传入的值
                    this.$emit('reciveMe','10001010001');
                }
            }
        };
       
        /* 父组件向子组件发送消息：需要将要发送的消息
            与子组件的自定义属性相绑定;在声明子组件时用
            props:['自定义属性名']接收到发送过来的消息；
            然后此时子组件就可以利用该属性名使用该消息了
        */
        // 声明父组件
        var App = {
            template:`<div class='main'>我是父组件
            <Content v-bind:mess='msg'  @reciveMe='showMess'/>
            </div>`,
            data(){ 
                return {
                    msg: 'hi'
                } 
            },
            components: {
                Content
            },
            methods:{
                showMess(data){
                    alert('子组件向我发送了消息： ' + data);
                }
            }
        };


        new Vue({
            el: '#app',
            // 使用局部组件
            template: `
                <App />
            `,
            data:function(){
                return {}
            },
            // 挂载局部组件
            components: {
                App
            }
        });
    </script>
</body>
</html>
Vue之父子组件的通信

猜你喜欢
