vue-组件

1.组件的介绍和使用

组件中是可以套组件的

组件就是：扩展 HTML元素，封装可重用的代码，目的就是复用

例如：

　　有一个轮播图，可以在很多页面中使用，一个轮播有js，css，html
组件把js，css，html放到一起，有逻辑，有样式，有html

组件的分类：

　　- 全局组件：可以放在根中，可以在所有组件中使用

　　　　-Vue.component('名字',{template:``,data(){return{}) })

　　- 局部组件：只能在当前组件中使用

1.1 全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h5>使用组件</h5>
    <hr>
    <child></child>
    <hr>
    <h5>第二次使用</h5>
    <child></child>
</div>
</body>
<script>
    // 定义一个全局组件：组件名,{样式，数据，方法。。。}
    Vue.component('child', {
        template: ` <div>
          <button @click="back">后退</button>
          {{ title }}
          <button>前进</button>
          </div>`,
        data() {
            return {
                title: '首页'
            }
        },
        methods:{
            back(){
                console.log('后退')
            },
            forward() {
                console.log('前进')
            }
        }
    })
    var vm=new Vue({
        el:'#app',
    })
</script>
</html>

结果：

1.2 局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h5>组件的使用</h5>
    <hh></hh>
</div>

</body>
<script>
    // Vue可以称为根组件
    var vm = new Vue({
        // 局部组件只能在这个el中使用
        el: '#app',
        data: {},
        // 局部组件定义在其他组件的内部,只能在父组件中使用，不能到别的地方使用
        components: {
            'hh': {
                template: `
                  <div>
                  <h5>局部组件</h5>
                  <img :src="url" alt="" height="400px" width="400px">
                  </div>`,
                data() {
                    return {
                        url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'
                    }
                },
                methods: {}
            }
        }
    })
</script>
</html>

结果：

还可以这样定义局部组件：通过变量的形式定义

局部组件和全局组件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h5>使用组件</h5>
    <hh></hh>
    <hr>
    <child></child>
    <hr>

</div>
</body>
<script>
    // 定义一个全局组件：组件名,{样式，数据，方法。。。}
    Vue.component('child', {
        template: ` <div>
          <button @click="back">后退</button>
          {{ title }}
          <button>前进</button>
          </div>`,
        data() {
            return {
                title: '首页'
            }
        },
        methods:{
            back(){
                console.log('后退')
            },
            forward() {
                console.log('前进')
            }
        }
    })
     // 定义局部组件:通过变量的形式定义
    var hh = {
        template: `
          <div>
          <h5>局部组件</h5>
          <img :src="url" alt="" height="400px" width="400px">
          </div>`,
        data() {
            return {
                url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'
            }
        },
        methods: {}
    }
    var vm=new Vue({
        el:'#app',
        components:{
            hh
        }
    })
</script>
</html>

结果：

局部组件只能在根组件中使用

组件总结：

1. 全局组件是使用Vue.component定义的，可以在全局任意组件中使用

2. 局部组件是定义在某个组件内的：components，只能用在当前组件中

3. 组件可以嵌套定义和使用

# 扩展：elementui,提供给咱们很多全局组件，可以引入使用

2. 组件间通信

组件嵌套：

　- 父组件被数据传递给子组件

　　- 自定义属性：

　　　　1. 在子组件中自定义属性，使用属性指令绑定父组件的变量

　　　　2. 在子组件中，使用props接收：['属性名'，'属性名2']

　　　　3. 在子组件中，使用属性名即可

　- 子组件把数据传递给父组件

　　- 自定义事件：

　　　　1. 父组件中自定义事件：handleEvent

　　　　2. 子组件中只要执行：this.$emit('myevent','需要传递的参数')，就会自动触发自定义事件对应的函数

2.1 组件间通信值父传子

　- 通过自定义属性（可以写多个）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>组件的使用</h1>
    <hr>
    <!--这样写myshow是字符串类型-->
<!--     <hh :murl="url" myshow="true"></hh>-->
<!--绑定属性，myshow是布尔类型-->
    <hh :murl="url" :myshow="true"></hh>
    <hr>
</div>
</body>
<script>
    // 定义一个局部组件
    var hh = {
        template: `
          <div>
          <h5>局部组件</h5>
          <!--这边绑定的也是自定义的属性：murl-->
          <img :src="murl" alt="" height="400px">
          <button @click="handleCheck">点我看myshow类型</button>
          </div>`,
        data() {
            return {}
        },
        methods: {
            handleCheck(){
                console.log(this.myshow)
                console.log(typeof this.myshow)
            }
        },
        // 通过props拿到url
        props: ['murl','myshow']
    }
    // 根组件，父组件中有图片地址
    var wm = new Vue({
        el: '#app',
        data: {
            url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'
        },
        // 局部组件是定义在某个组件内,可以定义多个,只能在它父组件中使用，不能到别的地方使用
        components: {
            hh,
        }
    })
</script>
</html>

结果：

-1. 在父组件的data中存放：url：图片地址

-2. 在子组件的标签中自定义属性并绑定url

- 3. 在子组件中使用props接收自定义属性：props:['自定义属性']

-4 自定义的属性不需要再data中定义了

自定义属性myshow的类型：

<hh :murl="url" myshow="true"></hh>：字符串

<hh :murl="url" :myshow="true"></hh>：布尔类型

2.2 组件间通信之子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h4>组件的使用</h4>
    接收到的子组件输入的内容是：{{username}}
    <hr>
    <!--自定义事件：handleEvent，写在父组件中-->
    <hh @myevent="handleEvent"></hh>
    <hr>
</div>
</body>
<script>
    var hh={
        template: `
          <div>
          <h5>局部组件</h5>
          <img :src="url" alt="" height="400px">
          <br>
          <input type="text" v-model="username"><button @click="handleSend">传递到父组件</button>
          </div>`,
        data() {
            return {
                url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg',
                username: '',
            }
        },
        methods:{
            handleSend(){
                // 传给父组件里面写自定义事件的名字
                this.$emit('myevent',this.username)
            }
        }
    }
    var vm=new Vue({
        el:'#app',
        data:{
            username:'',
        },
        methods:{
            // 自定义事件,写在父组件中,这里的username是子组件传递过来的
            handleEvent(username){
                console.log('父组件自定义事件的event执行了')
                console.log(username) //这里是子组件传递的username、
                this.username=username // 将接收到子组件传递的username给了父组件中的username
            }
        },
        components:{
            hh
        }
    })
</script>
</html>

结果：

流程：

ref 属性

ref属性：是Vue提供的，写在标签上

　　- 可以写在普通标签上：在vue中使用 this.$refs.名字--》拿到DOM对象，可以原生操作

　　- 可以写在组件上：在vue中使用：this.$refs.名字---》拿到 [组件]对象，组件属性，方法直接使用即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>ref属性放在普通标签上</h1>
    <input type="text" v-model="username" ref="myinput">
    <br>
    <img src="http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg" alt="" height="300px" ref="myimg">


    <h1>ref放在组件上</h1>
    <hr>
    <lqz ref="mylqz"></lqz>
    <hr>

    <button @click="handleClick">点我执行函数</button>

    <br>
    {{username}}

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: ''
        },
        methods: {
            handleClick() {
                console.log(this.$refs)
                // 通过key，取到标签，拿到原生dom，通过dom操作，控制标签
                // this.$refs.myinput.value = 'lqz'
                // this.$refs.myimg.src='https://img2.woyaogexing.com/2021/09/22/3c686eb61fe34696840c478584b73d36!400x400.jpeg'

                // 放在组件上---》现在在父组件中，能拿到子组件对象，对象中的属性和方法直接用即可
                console.log(this.$refs.mylqz)
                // this.$refs.mylqz.title = 'sb'
                // this.username=this.$refs.mylqz.title
                // 直接调用方法
                this.$refs.mylqz.handleBack()
            }
        },
        components: {
            lqz: {
                template: `
                  <div>
                  <button @click="handleBack">后退</button>
                  {{ title }}
                  <button>前进</button>
                  </div>`,
                data() {
                    return {
                        title: "首页"
                    }
                },
                methods: {
                    handleBack() {
                        alert('后退了')
                    }
                }
            }
        }
    })
</script>
</html>