Vue组件并且传递详解

了解Vue，先看看八个钩子函数

<div id="app">
        {{username}}
    </div>
    <script>
        var vm=new Vue({
            el:"#app",//挂载的dom,ID对象
            data:{
                //响应式数据，可自定义很多属性,
                username:"danyannan",
                age:18,
            },
            beforeCreate(){
                console.log(this.username);//undefined
            },
            created(){
            //最早可以发送ajax数据请求的地方
                console.log(this.username);//danyannan
            },
            beforeMount(){
                console.log(document.getElementById("app"));
                //<div id="app">{{username}}</div>
                // this.username="lvyibing"  可以修改数据

            },
            mounted(){
                //只需更新一次，最终是最后打印的那个值
                console.log(document.getElementById("app"));
                //<div id="app">lvyibing</div>
                this.username="lvyibing"
                //销毁组件
                setTimeout(()=>{
                    vm.$destroy();
                },3000)
            },
            beforeUpdate(){
                //在mounted里面更新，beforeUpdate,updated可以执行，在created，beforeMOunted不会被执行
                console.log("defore")
            },
            updated(){
                console.log("update")
            },
            beforeDestroy(){
                //销毁组件时才执行这两个钩子函数
                console.log("beforeDestroy")
            },
            destroyed(){
                console.log("destroy")
            }
        })
       <script>

组件通俗讲就是定义一个标签，并赋予一些功能

全局组件

//定义一个全局组件
Vue.component('counter',{//组件名字叫counter
//template里面也可以写id,然后在script里面写标签内容
            template:"<div>counter...</div>",
            data(){//如果需要data，里面必须return
                return {
                    count:2
                    }
            },
        })
 var vm=new Vue({
            el:"#app",
            data:{
                count:1,
            }
        })
   //     -------------在html里面就可以写组件定义的标签了
   <div id="app">
        <counter></counter>
    </div>

局部组件

<div id="app">
        <compa></compa>
</div>
//------h1和h2都在div里面
const compb={
            template:'<h1>compb...</h1>'
 }
const compa={
            template:'<h2>counter...</h2>'
            components:{
                compb
            }
}
var vm=new Vue({
            el:"#app",
            components:{
                compa,
            },
        })

组件之间的数据传递的方式

父组件向子组件中传递数据，可以在子组件中通过设置props属性来接收传递过来的数据。

<div id="app">
        <lyb :mytitle="title" :mylist="list"></lyb>
</div>
//---------------------------------------
<script type="text/template" id="lybTem">
        <div>
        //这是从父组件传进来
            <h1>{{mytitle}}</h1>
            <ul>
            //这是从父组件传进来username，age
                <li v-for="user in mylist">
                    {{user.username}}
                    {{user.age}}
                </li>
            </ul>
 </div>
 //---------------------------
Vue.component('lyb',{
//子组件中通过props属性接收父组件传递过来的数据
            props:['mytitle',"mylist"],
            template:"#lybTem",
        })
var vm=new Vue({
            el:"#app",
            data:{
                title:"from title to rout",
                list:[
                {username:"lyb",age:20},
                {username:"ss",age:10},
            ]
            },
            
        })

子组件向父组件传递数据

<div id="app">
    <div>{{num}}</div>
    <!-- 通过 v-on 监听事件-->
    <send @send="changeHandle"></send>
</div>
//------------
const send={
//在局部定义点击事件，
        template:`<button @click="clickHandle">点击接收子组件传递过来的数据</button>`,
        data(){
            return {num:6}
        },
        methods: {
            clickHandle(){
            	//使用 $emit派发事件（事件名字和组件里面的名字一样）
                this.$emit("send",this.num);
            }
        }
    }
    var vm=new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods: {
        //在这接受子组件的数据
            changeHandle(data){
                this.num=data;
            }
        },
        components:{
            send
        }
    })

组件里面的数据传到数据外面。通过插槽，第一绑定属性

<div id="app">
        <!-- default可以省略到 -->
     <current-user v-slot:default="user">
         my name is {{user.myusername}}
     </current-user>
    </div>
    //==============================
    Vue.component('current-user',{
            template:`
            <div>
                <slot v-bind:myusername="username"></slot>
            </div>
            `,
            data(){
                return {
                    username:'lvyib'
                }
            }
        })
  var vm=new Vue({
            el:"#app",
   }) 

依赖注入 provide inject

它允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
主要解决了跨级组件间的通信问题

<div id="app">
       <compa></compa>
    </div>
    <script>
        const compb={
            inject:['lybusername'],//接受provide发出来的
            template:`
            <h1>ppppsssbbbb{{$root.username}}{{lybusername}}</h1>
            `,
            mounted(){
                console.log(this.$root.username)//gen组件名字xioahong
                console.log(this.$parent.title)//你是猪么
                console.log(this.$parent.start())//执行父组件的start方法
            }
        }
        const compa={
            template:`
            <div>
            <compb ref="reffffcomb"></compb>
            </div>
            `,
            data(){
                return {
                    title:"你是猪么"
                }
            },
            methods:{
                start(){
                    console.log("你是谁啊")
                }
            },
            components:{
                compb
            },
            mounted(){
                console.log(this.$refs.reffffcomb.title);
            }
        }
        var vm=new Vue({
            el:"#app",
            data:{
                username:"xioahong"
            },
            provide:function(){//实现数据传递,不是响应式de。
                return {
                    lybusername:"xiaonan"
                }
            },
            components:{
                compa
            },
        })
    </script>

父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on监听事件；缺点：组件嵌套层次多的话，传递数据比较麻烦。祖先组件通过依赖注入(inject/provide)的方式，向其所有子孙后代传递数据；缺点：无法监听数据修改的来源，不支持响应式。通过属性$root / $parent / $children / ref，访问根组件、父级组件、子组件中的数据；缺点：要求组件之间要有传递性。