六十六、vue组件

vue组件

一组件基础
- 1.1 定义全局组件
- 1.2 定义局部组件
二组件通信
三动态组件

一组件基础

1.1 定义全局组件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="app">
<button-counter>button-counter>
<button-counter>button-counter>
<button-counter>button-counter>
div>
body>
<script>
    Vue.component('button-counter',{
        template:`
        
        `,
        data(){
            return {
                count:0
            }
        }
    })
    let vm = new Vue({
        el: '#app',
        data: {},
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

1.2 定义局部组件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="app">
<navbar>navbar>
div>
body>
<script>
Vue.component('navbar', {
    template: `
        
            
            我是NavBar
            
            

            
        
    `,
    methods: {
        handleClick() {
            console.log('nav nav')
        },
    },
    components: {
            child: {
                template: ``,
            }

        }
})
    let vm = new Vue({
        el: '#app',
        data: {}
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

二组件通信

2.1 父子通信之子传父

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>

head>
<body>
<div id="app">
    <h1>自定义事件实现父子通信之子传父h1>
    父组件中的name值为：{{name}}
    <hr>
    <init @myevnet="handleEvent">init>
    <hr>

div>
body>
<script>


    var init = {
        template: `
          
          我是init组件
           ---》{{ name }}
          

          
          `,
        data() {
            return {
                name: ''
            }
        },
        methods: {
            handleSend() {
                // alert('我被点了')
                // 在这里，触发自定义事件的执行
                this.$emit('myevnet', this.name)
            }
        }

    }
    var vm = new Vue({
        el: '#app',
        data: {
            name: '刘亦菲'
        },
        methods: {
            handleEvent(name) {
                this.name = name
            }
        },
        components: {
            init
        }


    })


script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

2.2 父子通信之父传子

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="app">
    
    
    
    <navbar :myname="name" :isshow="true">navbar>
div>
body>
<script>
    //没有代码提示，语法检查，目前这么用
    //后面会使用webpack打包，直接定义成 xx.vue文件，通过webpack打包
    Vue.component('navbar', {
        template: `
            
                
                父组件传递的内容是:{{myname}}
                传入的布尔是{{isshow}}
                
                

            
        `,
        // props:['myname'],
        props:{
            myname:String,
            isshow:Boolean,
        },
    })
    var vm = new Vue({
        el: '#app',
        data: {
            name:'jasper'
        },

    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

2.3 ref属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="app">

    <input type="text" ref="mytext">
    <button @click="handleClick">点我button>
    <child ref="mychild">child>
div>
body>
<script>
    Vue.component('child',{
        template:`child`,
        data(){
            return {
                text:'子组件数据'
            }
        },
        methods:{
            add(){
               console.log('子组件的add方法')
            }
        }
    })
 var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            handleClick() {
                console.log(this)
                //this.$refs.mytext 获取到input控件，取出value值
                console.log(this.$refs.mytext.value)
                console.log(this.$refs.mychild.text)
                // this.$refs.mychild.add()
                this.$refs.mychild.add('传递参数')

            }
        }

    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

三动态组件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="box">
    <ul>
        <li><a @click="who='child1'">首页a>li>
        <li><a @click="who='child2'">商品a>li>
        <li><a @click="who='child3'">购物车a>li>
    ul>
    <keep-alive>
         <component :is="who">component>
    keep-alive>

div>
body>
<script>
    Vue.component('child1', {
        template: `
          首页
        `,

    })
    Vue.component('child2', {
        template: `
                   商品
                   
                    `,
    })
    Vue.component('child3', {
        template: `
                   购物车
                    `,
    })
    var vm = new Vue({
        el: '#box',
        data: {
            who:'child1'
        },

    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

相关阅读:
（九）数据结构-二叉树
 JVM-垃圾回收
 Maven 打包方式探究
 鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统
 【PG】PostgreSQL13主从流复制部署(详细可用)
Day8力扣打卡
 python 视频硬字幕去除内嵌字幕去除工具 vsr
运维行业数字化维修数据屏来袭
 defer-promise 源码解析(Npm library)
微策生物递交注册：转型推动业绩大幅增长，年复合增长率达170%
原文地址：https://blog.csdn.net/weixin_68531269/article/details/127588340

六十六、vue组件

vue组件

一 组件基础

1.1 定义全局组件

1.2 定义局部组件

二 组件通信

2.1 父子通信之子传父

我是init组件

2.2 父子通信之父传子

2.3 ref属性

三 动态组件

一组件基础

二组件通信

三动态组件