1.全局/局部組件

<whole></whole><moon></moon>

//下面是局部組件，局部組件需要在根組件中寫入
var moon={
    template:`<div><button @click="back">《=</button>局部組件<button >=》</button><img :src="url" alt=""></div>`,
    data(){return{url:'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'}},
    methods:{back(){console.log('局部組件back')}},
}
//下面是全局組件
Vue.component('whole',{
    template:`<div><button @click="back">《=</button>{{title}}<button >=》</button></div>`,
    data(){return {title:'我是全局組件'}},
    methods:{back(){console.log('back')}},
});
//根組件
let vm = new Vue({
    el: "#app",data: {},methods: {},computed:{},watch:{},
    components:{moon}//////////////這里面寫局部組件
})

2組件間通信
通信值父傳子

<moon :url='url'></moon>
//下面是局部組件
var moon={
    template:`<div><button @click="back">《=</button>局部局部<button >=》</button><img :src="url" alt=""></div>`,
    data(){return{}},
    methods:{back(){console.log('局部局部back')}},
    props:['url']
}
//根組件
let vm = new Vue({
    el: "#app",
    data: {url:'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'},
    methods: {},computed:{},watch:{},
    components:{moon}//////////////這里面寫局部組件
})

通信值子傳父

image-20230606115516512.png

接受到的子組件輸入的內(nèi)容是：{{username}}
<moon @myevent="handelEvent"></moon>

//下面是局部組件
var moon={
    template:`<div><button  @click="handleSend">《=</button>局部局部<button >=》</button><img :src="url" alt=""><br>
      <input type="text" v-model="username"></div>`,
    data(){return{url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg',username: ''}},
    methods:{handleSend(){this.$emit('myevent', this.username)}},// 傳遞給父組件
    props:['url']
}
//根組件
let vm = new Vue({
    el: "#app",
    data: {url:'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'},
    methods: {
        handelEvent(username) {
            console.log('父組件自定義事件的event執(zhí)行了');console.log(username)
            this.username = username
        }
    },computed:{},watch:{},
    components:{moon}//////////////這里面寫局部組件
})

3.ref屬性

# ref屬性，vue提供的，寫在標簽上
可以寫在普通標簽：在vue中使用 this.$refs.名字  拿到dom對象，可以原生操作
可以寫在組件上:在vue中使用 this.$refs.名字  拿到[組件]對象，組件屬性，方法直接使用即可

4動態(tài)組件

<button @click="who='home1'">1</button>
<button @click="who='home2'">2</button>
<button @click="who='home3'">3</button>
<component :is="who"></component>

var home1={template:`<h1>1</h1>`}
var home2={template:`<h1>2</h1>`}
var home3={template:`<h1>3</h1>`}
var vm=new  Vue({
    el:'#app',
    data:{who:'home1'},
    components:{home1,home2,home3}
})

4.1 keep-alive

<keep-alive> <component :is="who"></component></keep-alive>

5.插槽

使用步驟：
#1  在組件的html的任意位置，放個標簽
    <slot></slot>
# 2 后期在父組件使用該組件時
    <lqz>
    放內(nèi)容
    </lqz>
# 3 放的內(nèi)容，就會被渲染到slot標簽中

var lqz = {template: `<div><h1>我是一個組件</h1> <slot></slot><h2>我是組件內(nèi)部的h2</h2></div>`}
var vm = new Vue({
    el: '#app',data: {},components: { lqz,}
})

5.1 具名插槽

1 組件中可以留多個插槽，命名
    <div>
        <h1>我是一個組件</h1>
        <slot name="middle"></slot>
        <h2>我是組件內(nèi)部的h2</h2>
        <slot name="footer"></slot>
    </div>
2 在父組件中使用時，指定某個標簽渲染到某個插槽上
    <lqz>
        <div slot="footer">我是div</div>
    <img slot="middle" src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt=""></lqz>