Vue--组件的使用

局部组件的使用

1，如果仅仅是实例化vue对象中,既有el,又有template,如果template中定义模板内容,那么template模板的优先级大于el

2,局部组件的使用

(1),声子:声明的时候要把声明的组件放在上面,然后再在下面的vue中挂子和用子,否则因为挂子中用到子组件的组件名,写在下面的话,挂子的时候找不到组件,所以没有效果,声明组件,Vue中,组件的名字,首字母要大写,跟标签区分开,组建中的data必须是个函数,一定有返回值

let App = {
        data(){
            return {
               text:"我是日天"
            }

        },
        template:`
            <div id="a">
                <h2>{{ text }}</h2>
            </div>
        `,
        methods:{

        }
    }

(2),挂子:挂载子组件(在vue中挂载)

components:{
            //2.挂子
            //如果key和value一样 可以只写一个
            //App:App
            App
        }

(3), 用子: 使用子组件,template里面必须是闭合标签

template: `
                <div class="app">

                 <App></App>
                </div>

            `,

全局组件的使用

第一个参数是组件的名字,第二个参数options参数,他是全局组件

Vue.component('VBtn',{
        data(){
            return {

            }
        },
        template:`<button>
            <slot></slot>

</button>`
    })

父子组件之间的传值问题

如何区分是父组件还是子组件:

组件通过pros属性接受它的父级的数据，那么当前这个组件就是相对的子组件了，提供数据的就是父组件了。

1,父==>子传值

1,在子组件中,声明props,只要声明了该属性,name就可以在组建中任意使用

2,在父组件通过绑定自定义属性,挂载数据属性

<Son :msg = 'msg'>

<Son :msg = 'msg'>

 let Vheader = {
        data() {
            return {}
        },
        //只要声明了父组件的属性，就可以使用
        props: ['msg', 'post'],
        template: `
            <div class="child">
                <h2>日天</h2>
                <h2>{{ msg }}</h2>
                <h3>{{ post.title}}</h3>
            </div>
        `
    }
    let App = {
        data() {
            return {
                text: "我是父组件的数据",
                post: {
                    id: 1,
                    title: 'My Journey with Vue'
                }
            }

        },
        template: `
            <div id="a">
                //绑定自定义属性
                <Vheader :msg = 'text' v-bind:post = 'post'></Vheader>
            </div>
        `,
        methods: {},
        components: {
            Vheader
        }
    }

2,子==>父传值

1,在子组件中,通过 this.$emit('方法名',值)

2,在父组件中,绑定自定义事件

let Vheader = {
        data() {
            return {}
        },
        //只要声明了父组件的属性，就可以使用
        props: ['msg', 'post'],
        template: `
            <div class="child">
                <h1>我是header组件</h1>
                <h2>日天</h2>
                <h2>{{ msg }}</h2>
                <h3>{{ post.title}}</h3>
                <VBtn v-bind:id = 'post.id' @clickHandler="clickHandler"></VBtn>
            </div>
        `,
        methods:{
          clickHandler(val){
              alert(val);
              //('父组件声明自定义的事件','值')
              this.$emit('fatherHandler',val)
          }
        },
         created(){
          console.log(this);
        },
    }
    let App = {
        data() {
            return {
                text: "我是父组件的数据",
                post: {
                    id: 1,
                    title: 'My Journey with Vue'
                }
            }
        },
        template: `
            <div id="a">
                我是父组件的 {{post.id}}
                <Vheader :msg = 'text' v-bind:post = 'post' @fatherHandler = 'father_handler'></Vheader>
            </div>
        `,
        methods: {
            //绑定自定义事件
            father_handler(val){
                console.log(val);

                this.post.id = val;
            }
        },
        components: {
            Vheader
        },
         created(){
          console.log(this);
        },
    }

3,平行组件传值

使用bus公交车对象:绑定$son和$emit

let bus = new Vue();

A==>B传值 : $emit('函数名',值)===>$on('函数名',()=>{ })

let bus = new Vue();
    //A===》B   B要声明事件  $on('事件的名字',function(val){})  A要触发事件 $emit('A组件中声明的事件名','值')

    //前提 这两个方法必须绑定在同一个实例化对象（bus）
    Vue.component('Test2', {
        data() {
            return {
                text:''
            }
        },
        template: `
            <h2>{{ text }}</h2>
        `,
        methods: {

        },
        created(){
            bus.$on('testData', (val)=> {
                alert(val);
                this.text = val;
            })
        }
    })
    Vue.component('Test', {
        data() {
            return {
                msg: '我是子组件的数据'
            }
        },
        props:['txt'],
        template: `
            <button @click = 'clickHandler'>{{ txt }}</button>
        `,
        methods: {
            clickHandler() {

                bus.$emit('testData',this.msg)
            }
        }
    })