vue组件

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

接受到的子组件输入的内容是：{{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执行了');console.log(username)
            this.username = username
        }
    },computed:{},watch:{},
    components:{moon}//////////////这里面写局部组件
})

3.ref属性

# ref属性，vue提供的，写在标签上
可以写在普通标签：在vue中使用 this.$refs.名字  拿到dom对象，可以原生操作
可以写在组件上:在vue中使用 this.$refs.名字  拿到[组件]对象，组件属性，方法直接使用即可

4动态组件

<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>
    放内容
    </lqz>
# 3 放的内容，就会被渲染到slot标签中

var lqz = {template: `<div><h1>我是一个组件</h1> <slot></slot><h2>我是组件内部的h2</h2></div>`}
var vm = new Vue({
    el: '#app',data: {},components: { lqz,}
})

5.1 具名插槽

1 组件中可以留多个插槽，命名
    <div>
        <h1>我是一个组件</h1>
        <slot name="middle"></slot>
        <h2>我是组件内部的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>