vue组件基本参数

注册全局组件

 

<!--注册全局组件-->
    <div id="app">
        <!--
            组件使用驼峰命名法使用时候需要使用-小写调用
        -->
        <my-com1></my-com1>
    </div>
    <script>
        /*
        使用Vue.component创建组件，参数1为组件名称
        
        */
        Vue.component('myCom1', {
            //通过template属性指定组件要展示的html结构
            template: '<h3>Vue.extend创建组件</h3>'
        })
        let vm = new Vue({
            el: '#app',
            data: {}
        })
    </script>

<!--注册全局组件-->
    <div id="app">
        <mycom1></mycom1>
    </div>
    <!--在被控制的#app外使用template 元素-->
    <template id="temp1">
        <div>
            <h1>通过template组件</h1>
        </div>
    </template>
    <script>
    Vue.component('mycom1',{
        template:'#temp1'
    })
    let vm=new Vue({
        el:'#app',
        data:{
        }
    })
    </script>

　　

注册私有组件

<div id="app2">
            <login></login>
    </div>
    <template id="temp2">
            <h2>私有组件</h2>
    </template>

new Vue({
        el:'#app2',
        data:{},
        methods:{},
        filters:{},
        directives:{},
        components:{    //定义私有组件
            login:{
                template:'#temp2'
            }
        },
        beforeCreate(){},
        created(){},
        beforeMount(){},
        mounted(){},
        beforeUpdate(){},
        updated(){},
        beforeDestroy(){},
        destroyed(){}
    })

父组件传递值到子组件

<div id="app">
        <!--父组件可以在引用子组件时候可以通过属性绑定的形式，
            把需要传递给子组件的数组以属性绑定的形式传递-->
        <com1 :parentmsg="msg"></com1>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '123 父组件'
            },
            methods: {},
            components: {
                //子组件中默认无法访问父组件中的data上的数据和methods中的函数
                com1: {
                    /*
                    组件中的所有props数据都是通过父组件传递的
                    把父组件传递的属性定义好才能使用父组件传递参数
                    props中的数据都是只读的
                    */
                    props: [
                        'parentmsg'
                    ],
                    template: '<h1>子组件--{{parentmsg}}</h1>'
                }
            }
        })
    </script>

父组件传递函数到子组件

<div id="app">
        <!--父组件向子组件传递方法使用事件绑定机制-->
        <com2 @func="show"></com2>
    </div>
    <template id="temp1">
        <div>
            <h1>这是自组件</h1>
            <input type="button" value="点击" @click="myClick" />
        </div>
    </template>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                show(data) {
                    console.log(data)
                }
            },
            components: {
                com2: {
                    template: '#temp1',
                    data() {
                        return {
                            son: { name: '张三', age: 123 }
                        };
                    },
                    methods: {
                        myClick() {
                            console.log("ok")
                            //使用emit调用父组件传递函数，第一个参数是函数名称，后边参数为传递的参数
                            this.$emit('func', this.son)
                        }
                    }
                }
            }
        })