Vue based learning components by value ---

Parent component -> subcomponents

<!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>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

< Body > 
    < div ID = "App" > 
        <-! 01. In son tag, add a property Note: With the value of msg Crossing, f2s before adding: -> 
        < son : f2s = 'msg' > </ Son > 
    </ div >

    <script>
        const vm = new Vue({
            on: ' #app ' ,
            data() {
                return {
                    msg: 'hello world'
                }
            },
            methods: {},
            components: {
                // Component Name: Component Parameters 
                Son: {
                     // use the value of the received component 03 
                    Template: ' <H2> F2S {{}} </ H2> ' ,
                     // 02props attribute of the receiver 
                    The props: [ ' F2S ' ]
                }
            }
        });
    </script>
</body>

</html>

summary

Add property f2s in son tag (attribute names are free to play), to pass the value
Props used in the receiver subassembly and template in use

Subassemblies -> parent component

<!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>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

< Body > 
    < div the above mentioned id = "App" > 
        <-! 02. reference component
            funfromson $ emit sub-assembly for the first parameter 
            The method of the parent component for receiving fathermethod parameter -> 
        < Son @funfromson = "fathermethod" > </ Son > 
    </ div >

    <script>

        const vm = new Vue({
            on: ' #app ' ,
            data() {
                return {

                }
            },
            methods: {
                // Method 03- parent components received subassembly parameter passing, the value of the parameter is passed 
                fathermethod (data) {
                    Alert ( ' the received data sub-assembly '  + Data)
                }
            },
            components: {
                son: {
                    Template: ' <the Click Button @ = "send2f"> Click subassembly </ Button> ' ,
                    methods: {
                        send2f() {
                            // . $ EMIT ( 'parent components referenced method name subassembly', 'parameter to pass')> parent component by this - 01- subassembly 
                            the this $ EMIT (. ' Funfromson ' , ' XXXX ' );
                        },
                    },
                }
            }
        });
    </script>
</body>

</html>

summary

Examples of the neutron component is a button when the button is clicked, trigger button click event, call the sub-components of send2f method

In send2f method by this. $ Emit () call the parent component method, and data as a parameter passed in the past

Vue based learning components by value ---

summary

summary

Guess you like