vue 父组件给子组件传值

步骤1、定义子组件

 <template id="login">
        <div>
            登录组件login
        </div>
 </template>
  

步骤2、注册子组件

<script>
        Vue.component("login", {
            template: "#login",
            data() {
                return {


                }
            },
            created () {
                //提取接口数据
            },
            filters: {
                //私有的过滤器
            },
            directives: {
                //自定义的指令
            },
            methods: {
                //事件函数等
            },
            props: {
                //接受父组件的传值--方式1
                title:{
                    //title是父组件传过来的属性名
                    type:[String,Number],
                    default:"如果父组件不传值，子组件会有一个默认值"
                },



                //方式2
                title2:String,



                //方式3
                title3:[String,Number]
            }
        })
    </script>

---数据分离的好处：组件可以被其他任意的组件调用，在被其他组件调用的时候可能需要修改里面的数据，但是在本身组件中的数据不需要修改，为了解决这个问题需要进行数据分离。需要注意的是，在开发项目的过程中，要求data中的数据必须进行数据分离

步骤3、父组件

<div id='app'>
        <login title="父组件传值" title1="父组件传值2" title2="父组件传值3"></login>
</div>

　　<script>

        const vm = new Vue({

            el: '#app',

            data: {},

        })

    </script>

注意：在父组件中自定义的属性可以进行动态绑定

<login :title="父组件传值" :title1="父组件传值2" :title2="父组件传值3"></login>

注意：此时的“父组件传值”为变量，故而在子组件中应该定义  名为“父组件传值”的变量