04 (H5*) Vue第四天

目录：

1：父组件向子组件传值，通过属性绑定的方式。

2：父组件向子组件传方法，通过事件绑定的方式 。

3：通过ref来获取Dom元素

1：父组件向子组件传值，通过属性绑定的方式

1.1：父组件声明数据

1.2：子组件声明属性

<script>

        var vm = new Vue({

            el : "#app",

            data : {

                msg : "这是父组件中的数组",

            },

            components : {

                tem : {

                    template : "#tem",

                    // 这是从父组件中传递过来的数据，这里的数据是只读的。

                    props : [

                        "parentmsg",

                    ],

                    data(){ // 子组件中的数据，是子组件私有的，不是父组件传递过来的，

                            // 比如从ajax请求过来的数据。这里的数据是可读可写的

                        return {

                            title : "1234",

                        };

                    }

                },

            

            },

        });

    </script>

1.3：子组件引用的使用绑定属性

<div id="app">

        <tem v-bind:parentmsg="msg"></tem>

    </div>

    <template id="tem">

        <h1>这是子组件~~{{parentmsg}}</h1>

    </template>

 

 

2：父组件向子组件传递事件

<body>

    <div id="app">

        <!-- 2:绑定父组件方法到子组件中 -->

        <tem @func="show"></tem>

    </div>

    <template id="tem">

        <div>

            <h1>这是子组件</h1>

            <input type="button" value="子组件中的方法" @click="myclick">

        </div>

        

    </template>

    <script>

        var vm = new Vue({

            el : "#app",

            data : {

                msg : "这是父组件中的数组"

            },

            methods : {

                // 1:声明父组件方法

                show(arg){

                    console.log(arg)

                }

            },

            components : {

                tem : {

                    template : "#tem",

                    methods : {

                    // 4:调用子组件方法

                    myclick(){

                        // 3:声明子组件方法

                        this.$emit("func", "123");

                    }

                }

                },

                

            },

        });

    </script>

</body>

 

 

3:ref获取dom元素和组件。

<body>

    <div id="app">

        <h2 ref="myh2">我是h2标签</h2>

        <input type="button" value="点击" @click="myclick">

    </div>

    <script>

var vm = new Vue({

            el : "#app",

            data :{

            },

            methods : {

                myclick(){

                    console.log(this.$refs.myh2.innerText);

                },

            }

        });

    </script>

    

</body>

 

 

 

4：路由四部曲

1：导包

2：定义路由规则

3：挂载到Vue实例中

4：显示在html元素里

<body>

    <div id="app">

        <router-link to="/login">登陆</router-link>

        <router-link to="/register">注册</router-link>

        <router-view></router-view>

    </div>

 

    <script>

        var login = {

            template :"<h3>登陆组件</h3>", 

        };

        var register = {

            template : "<h3>注册组件</h3>",

        }

        var router = new VueRouter({

            routes : [

                {path : "/", component: login},

                {path : "/login", component: login},

                {path : "/register", component : register},

            ],

        });

        var vm = new Vue({

            el : "#app",

            data : {

            },

            router : router,

        });

    

    

    </script>

</body>