1. Vue生命周期钩子函数&组件&插槽.md

已于 2022-05-09 09:59:55 修改
阅读量480 收藏 1
点赞数
分类专栏： 5.Vue 文章标签： vue.js javascript 前端
于 2022-05-08 19:29:52 首次发布
风
本文链接：https://blog.csdn.net/qq_46137324/article/details/124652967
版权

1. 生命周期

1.1 生命周期图

image-20220507093231582

1.2 生命周期函数
钩子函数描述
beforeCreate创建Vue实例之前调用(没有任何的数据)
created创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount渲染DOM之前调用
mounted渲染DOM之后调用
beforeUpdate重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated重新渲染完成之后调用
beforeDestroy销毁之前调用
destroyed销毁之后调用
created: 向后端发请求拿数据,发送ajax请求

mounted: 定时任务, 延迟任务
beforeDestroy: 定时任务关闭, 销毁一些操作
1.3 创建/挂载/更新
create创建: 定义一个对象或组件.

// 创建Vue对象, 也被称为根组件
var app = new Vue({
	el: '',
	data: {name: 'kid'},
	methods: { func(){} }
})

组件定义的变量, 方法只能给自己的模板使用.

// 创建组件:
Vue.component('组件名', {
    // 模板
	template:`
	<div>
	{{ name }}
	</div>`,
    // data函数中返回自定义对象, 自定义对象中定义使用的变量
	data(){
        return {
			name: 'kid'
        }
	},
    // 方法
    methods: {
        func(){}
    }
})

mount挂载: 将Vue或组件放置到页面, 让页面能够使用.

// 对象的挂载
<div id='app'> xxx </div>

var app = new Vue({
	el: 'app',
    ...
}

// 组件挂载
<组件名></组件名>

Vue.component('组件名', ...)

update更新: 更新数据会重新渲染, (并不是所有的数据改变都会重新渲染!!!)
1.4 钩子函数测试
Vue对象没法看见效果过程, 定义一个组件来测试.
钩子函数与参数同级.
console.group()分组展示
console.groupEnd() 结束分组

this.属性   查看当前对象data属性中定义属性值.
this.$属性, 查看当前对象的属性, 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <button @click="headerClick">组件(添加/删除)</button>
    <model1 v-if="is_show">展示组件</model1>
</div>
</body>
<script>
    // 定义Vue对象 --作用--> 调用组件
    var vm = new Vue({
        el: '#app',
        data: {
            // 组件的开关
            is_show: false,
        },
        // 组件绑定的点击事件
        methods: {
            headerClick() {
                // 一点开, 再点关
                this.is_show = !this.is_show
            }
        }
    })

    // 定义组件
    Vue.component('model1',
        {
            template: `
              <div>
              <p>我的名字: {{ name }}</p>
              <p>
                <button @click="vary">点击修改名字</button>
              </p>
              </div>
            `,

            // 定义组件的变量
            data() {
                return {
                    name: 'kid'

                }
            },

            // 定义组件的方法
            methods: {
                vary() {
                    this.name = 'qq'
                },


            },
             beforeCreate() {
                    console.group('当前状态：beforeCreate')
                    console.log('当前el状态：', this.$el)
                    console.log('当前data状态：', this.$data)
                    console.log('当前name状态：', this.name)
                    console.groupEnd()
                },
                created() {
                    console.group('当前状态：created')
                    console.log('当前el状态：', this.$el)
                    console.log('当前data状态：', this.$data)
                    console.log('当前name状态：', this.name)
                    console.groupEnd()
                },
                beforeMount() {
                    console.group('当前状态：beforeMount')
                    console.log('当前el状态：', this.$el)
                    console.log('当前data状态：', this.$data)
                    console.log('当前name状态：', this.name)
                    console.groupEnd()
                },
                mounted() {
                    console.group('当前状态：mounted')
                    console.log('当前el状态：', this.$el)
                    console.log('当前data状态：', this.$data)
                    console.log('当前name状态：', this.name)
                    console.groupEnd()

                },
                beforeUpdate() {
                    console.group('当前状态：beforeUpdate')
                    console.log('当前el状态：', this.$el)
                    console.log('当前data状态：', this.$data)
                    console.log('当前name状态：', this.name)
                    console.groupEnd()
                },
                updated() {
                    console.group('当前状态：updated')
                    console.log('当前el状态：', this.$el)
                    console.log('当前data状态：', this.$data)
                    console.log('当前name状态：', this.name)
                    console.groupEnd()
                },
                beforeDestroy() {
                    console.group('当前状态：beforeDestroy')
                    console.log('当前el状态：', this.$el)
                    console.log('当前data状态：', this.$data)
                    console.log('当前name状态：', this.name)
                    console.groupEnd()
                },
                destroyed() {
                    console.group('当前状态：destroyed')
                    console.log('当前el状态：', this.$el)
                    console.log('当前data状态：', this.$data)
                    console.log('当前name状态：', this.name)
                    console.groupEnd() 
                },
        }
    )
</script>
</html>

添加组件展示:

2022-05-07_00542

组件数据更新:

2022-05-07_00543

没建任务, 没有任务销毁, 看不到实际的效果.

2022-05-07_00544

1.5 创建任务销毁任务
1. mounted钩子函数中创建任务
2. beforeDestroy钩子函数重销毁创建的任务

setInterval: 定时执行,每秒钟打印一下信息.

组件销毁, 清理定时器
clearInterval(this.f)
this.f = null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <button @click="headerClick">组件(添加/删除)</button>
    <model1 v-if="is_show">展示组件</model1>
</div>
</body>
<script>
    // 定义Vue对象 --作用--> 调用组件
    var vm = new Vue({
        el: '#app',
        data: {
            // 组件的开关
            is_show: false,
        },
        // 组件绑定的点击事件
        methods: {
            headerClick() {
                // 一点开, 再点关
                this.is_show = !this.is_show
            }
        }
    })

    // 定义组件
    Vue.component('model1',
        {
            template: `
              <div>{{text}}</div>
            `,

            // 定义组件的变量
            data() {
                return {
                    // 定义一个变量接收函数
                    func: null,
                    text: '打印信息中'
                }
            },

            // 定义一个定时任务
            mounted() {
                //  匿名箭头函数
                this.func = setInterval(()=>{
                    console.log('hello word!')
                }, 1000)

            },

            // 销毁定时任务
            beforeDestroy() {
                // 清除定时任务
                clearInterval(this.func)
                // 清除值
                this.func = null
            },
        }
    )
</script>
</html>

GIF 2022-5-7 12-28-51

2. Vue与后端交互

在页面渲染之前, created钩子函数向后端发送请求, 获取数据, 再将data的自定义对象的属性值修改.

方式一: jquery的ajax方法发送请求(基本不用了)

方式二: js官方提供的fetch方法(XMLHttpRequest)(官方的, 用的也少)

方式三: axios第三方, 做ajax请求(目录使用较多)
2.1 后端服务
* 1. 安装flask

 pip install flask

* 2. 创建一个flask项目

from flask import Flask, make_response, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    # 返回json格式的数据
    obj = make_response(jsonify({'name': 'kid', 'age': 18}))
    # 跨域问题
    obj.headers['Access-Control-Allow-Origin'] = '*'
    return obj


if __name__ == '__main__':
    app.run()
2.2 ajax
在钩子函数created中发送jquery的ajax请求获取数据, 之后修改data的属性值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
    <!--导入jquery-->
    <script src="js/jquery-3.6.0.min.js"></script>

</head>
<body>

<div id="app">
    <p>我的名字:{{name}}</p>
    <p>我的年龄:{{age}}</p>
</div>
</body>
<script>
    // 定义Vue对象
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: ''
        },
        created() {
            // 向后端发送ajax请求
            $.ajax({
                url: 'http://127.0.0.1:5000',
                type: 'get',
                // 回调函数使用箭头函数, 不产生自己的this.
                success: args => {
                    this.name = args.name
                    this.age = args.age
                }
            })
        }
    })

</script>
</html>

先开启flask服务

image-20220507164530564

打开页面

image-20220507164722850

2.3 fetch
在钩子函数created中发送js原生的fetch请求获取数据, 之后修改data的属性值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
    <!--导入jquery-->
    <script src="js/jquery-3.6.0.min.js"></script>

</head>
<body>

<div id="app">
    <p>我的名字:{{name}}</p>
    <p>我的年龄:{{age}}</p>
</div>
</body>
<script>
    // 定义Vue对象 
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: ''
        },
        created() {
            // 向后端发送请求
            fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res => {
                console.log(res)
                this.name = res.name
                this.age = res.age
            })
        }
    })
</script>
</html>
2.4 axios
在钩子函数created中发送ajax请求获取数据, 之后修改data的属性值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
    <!--导入jquery-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!--导入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

<div id="app">
    <p>我的名字:{{name}}</p>
    <p>我的年龄:{{age}}</p>
</div>
</body>
<script>
    // 定义Vue对象
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: ''
        },
        created() {
            // 向后端发送请求
            axios.get('http://127.0.0.1:5000').then(data => {
                // 数据放置返回值的data的data属性中
                console.log(data.data)
                this.name = data.data.name
                this.age = data.data.age
            })
        }
    })
</script>
</html>
2.5 练习
获取一些电影的数据
地址: https://m.maizuo.com/v5/?co=mzmovie#/city
获取服务器返回的给页面的数据.

image-20220507172015425

将数据复制到项目的Movie.json文件中

image-20220507172131282

from flask import Flask, make_response, jsonify

app = Flask(__name__)


@app.route('/films')
def films():
    # 跨域问题
    import json
    with open('./Movie.json', mode='r', encoding='utf-8') as f:
        # 文件时json格式的字符串, 反序列化拿到字典
        res = json.load(f)
    # 返回json格式数据, JsonResponse
    obj = make_response(jsonify(res))
    # 解决跨域问题
    obj.headers['Access-Control-Allow-Origin'] = '*'
    return obj


if __name__ == '__main__':
    app.run()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
    <!--导入jquery-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!--导入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

<div id="app">
    <h1>电影列表</h1>
    <ul>
        <li v-for="obj in movie">
            <p>电影名称: {{obj.name}}</p>
            <img :src="obj.poster" alt="" height="100px">
            <p>介绍:{{obj.synopsis}}</p>
            <hr>
        </li>
    </ul>
</div>
</body>
<script>
    // 定义Vue对象 
    var vm = new Vue({
        el: '#app',
        data: {
            // 等下用于存储 电影的列表数据
            movie: '',

        },
        created() {
            // 向后端发送请求
            axios.get('http://127.0.0.1:5000/films').then(data => {
                // 数据放置返回值的data的data属性的data属性的films属性中, 烦死了
                console.log(data.data.data.films)

                // 数据是一个数组套对象
                this.movie = data.data.data.films
            })
        }
    })
</script>
</html>

image-20220507182630210

3. 计算属性

3.1 引入1
实现名字首字母大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>

</head>
<body>

<div id="app">
    输入英文: <input type="text" v-model="text"> -->
    <!-- text.substring(0, 1)截取字符串第一个值,  toUpperCase转大写, text.substring(1)截取索引1之后的所有值-->
    {{text.substring(0, 1).toUpperCase() + text.substring(1)}}
</div>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            text: '',
        },
    })
</script>
</html>

image-20220507213504174

不推荐在插值中写过长的代码, 将代码打包到methods的函数中.
3.2 引入2
实现名字首字母大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>

</head>
<body>

<div id="app">
    输入英文: <input type="text" v-model="text"> -->
    {{Capitalize()}}
</div>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            text: '',
        },

        methods: {
            Capitalize() {
                console.log('Capitalize函数被触发')
                return this.text.substring(0, 1).toUpperCase() + this.text.substring(1)

            }
        }
    })
</script>
</html>

GIF 2022-5-7 21-52-41

3.3 引入3
写一个input框, 使用v-model双向绑定一个数据.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>

</head>
<body>

<div id="app">

    <p>
        输入英文: <input type="text" v-model="text"> -->
        {{Capitalize()}}
    </p>

    <p>
        输入英文(没有绑定函数): <input type="text" v-model="text2"> --> {{text2}}
    </p>
</div>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            text: '',
            text2: '',
        },

        methods: {
            Capitalize() {
                console.log('Capitalize函数被触发')
                return this.text.substring(0, 1).toUpperCase() + this.text.substring(1)
            }
        }
    })
</script>
</html>

GIF 2022-5-7 22-02-00

页面中只要数据发生变化了, 在 methods 中定义的函数, 也会重新触发. 这样就会消耗不必要的资源.
3.4 计算属性
computed-->把方法变成属性-->延缓计算
在页面中直接使用函数, 页面只要刷新, 函数就会重新运行,使用计算属性
只有当前函数使用的变量发生变化时, 才重新运算.

计算属性只有在它的相关依赖发生改变时才会重新求值.
计算属性在computed中定义, 写法与函数一样.  调用不需要加().
函数需要返回一个值, 这个值就是属性的值, 调用数据时展示.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>

</head>
<body>

<div id="app">

    <p>
        输入英文: <input type="text" v-model="text"> -->
        {{Capitalize}}
    </p>

    <p>
        输入框(没有绑定函数): <input type="text" v-model="text2"> --> {{text2}}
    </p>
</div>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            text: '',
            text2: '',
        },


        computed: {
            Capitalize() {
                console.log('Capitalize函数被触发')
                return this.text.substring(0, 1).toUpperCase() + this.text.substring(1)
            }
        }
    })
</script>
</html>

GIF 2022-5-7 22-12-17

3.5 过滤案例
使用计算属性写过滤案例.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="test">
    <ul>
        <li v-for="i in filter_array">{{i}}</li>
    </ul>
</div>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            // 过滤的的列表
            array1: ['a', 'ab', 'abc', 'x', 'xy', 'xyz'],
            test: ''
        },

        // 过滤列表
        computed: {
            filter_array() {
                console.log('计算属性被触发了!')
                var array2 = this.array1.filter(value => {
                    return value.indexOf(this.test) > -1
                })
                return array2
            }
        }
    })
</script>
</html>

计算属性默认触发以, 遍历数组的值判断值中是否有'', 返回0, 0 > -1, 返回一个完整的列表.

2022-05-07_00551

GIF 2022-5-7 22-46-12

4. 监听属性

watch: 监听属性只要监听的变量发生变化，就会执行方法.

监听一个属性, 当它的值发生变化, 触发绑定的函数.
监听属性在Vue对象的watch属性中定义.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听属性</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="test"> --> {{test}}
</div>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            test: ''
        },

        // 监听属性
        watch: {
            test: function (){
                console.log('触发侦听属性')
            }
        }
    })
</script>
</html>

GIF 2022-5-7 23-09-27

5. 组件化开发

组件: 将html, css(样式), js(逻辑)封装成一个组件, 在使用的的使用可以直接调用即可.

组件只能够在Vue对象el绑定的标签中使用, 每个组件的数据都是独立的.
全局组件: 可以在任意位置中调用, 可以局部中调用全局组件.
局部组件: 只能局部使用.
5.1 全局组件
全局组件：Vue.component()
组件有自己的html，css，js，相互不影响
template 一定要放在一个标签中
data必须是函数data(){retrun {} }

全局组件定义格式:
Vue.('组件名',
    {
    	// 定义模板, 模板只能管理一个标签. `<div> </div> 这样是不行的 <div> </div>`
		template:``,
    	// 定义模板使用的数据
    	data:{
            return {
            // 定义数据
        	}
        },
        //  定义方法
        methods: {},
})

最后定义一个vue对象.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <xx1></xx1>
    <xx2></xx2>
</div>

<xx1></xx1>
<script>

    // 定义局部组件, 组件名不能和html自带的标签重名
    // 组件1
    Vue.component('xx1',
        {
            // 定义模板, 只能管理一个标签, 可以在标签中嵌套标签
            template: `
              <div>
                  <p style="size: 30px; color: aqua">全局组件</p>
                  <p>我的名字:{{ name }}</p>
                  <p>
                    <button @click="func">打开弹框1</button>
                  </p>
              </div>
            `,
            // 定义模板使用的数据, data是一个函数, 在函数中返回模板需要使用的数据
            data() {
                return {
                    name: 'kid'
                }
            },

            // 定义方法
            methods: {
                func() {
                    alert('我的弹框!1')
                }
            }
        }
    )

    // 组件2
    Vue.component('xx2',
        {
            // 定义模板, 只能管理一个标签, 可以在标签中嵌套标签
            template: `
              <div>
                  <p style="size: 30px; color: red">全局组件</p>
                  <p>我的名字:{{ name }}</p>
                  <p>
                    <button @click="func">打开弹框2</button>
                  </p>
              </div>
            `,
            // 定义模板使用的数据, data是一个函数, 在函数中返回模板需要使用的数据
            data() {
                return {
                    name: 'qq'
                }
            },

            // 定义方法
            methods: {
                func() {
                    alert('我的弹框!2')
                }
            }
        }
    )

    var vm = new Vue({
        el: '#box',
        data: {},
    })
</script>
</body>
</html>
5.2 局部组件
局部组件: 写在组件内部 Vue.components中, 格式与全局组件一致.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <xx1></xx1>
    <xx2></xx2>
</div>
<script>
    
    var vm = new Vue({
        el: '#box',
        data: {},
        components:{
            // 组件1
            'xx1': {
            // 定义模板, 只能管理一个标签, 可以在标签中嵌套标签
            template: `
              <div>
                  <p style="size: 30px; color: aqua">全局组件</p>
                  <p>我的名字:{{ name }}</p>
                  <p>
                    <button @click="func">打开弹框1</button>
                  </p>
              </div>
            `,
            // 定义模板使用的数据, data是一个函数, 在函数中返回模板需要使用的数据
            data() {
                return {
                    name: 'kid'
                }
            },

            // 定义方法
            methods: {
                func() {
                    alert('我的弹框!1')
                }
            }
        },
            // 组件2
            'xx2': {
            // 定义模板, 只能管理一个标签, 可以在标签中嵌套标签
            template: `
              <div>
                  <p style="size: 30px; color: red">全局组件</p>
                  <p>我的名字:{{ name }}</p>
                  <p>
                    <button @click="func">打开弹框2</button>
                  </p>
              </div>
            `,
            // 定义模板使用的数据, data是一个函数, 在函数中返回模板需要使用的数据
            data() {
                return {
                    name: 'qq'
                }
            },

            // 定义方法
            methods: {
                func() {
                    alert('我的弹框!2')
                }
            }
        }
        }
    })
</script>
</body>
</html>

6. 组件数据传递

通过自定义属性：父传子-自定义的属性写在自定义的组件上, 自定义组件 --> props:['自定义属性名']
通过自定义事件：子传父-子中调用this.$emit('自定义事件名', 参数1, ...) -->触发写在定义组件上的 
@自定义事件名='函数'--> 函数执行(父组件)

ref属性：
放在普通标签--通过this.$refs.属性值-->原生dom
放在组件上--通过this.$refs.属性值--> 当前组价对象--> 拿到组件中的值, 执行组件中的方法
6.1 父组件传值给子组件
父组件传值给子组件
   1.1 在父组件的data中定义数据
   1.2 使用子组件, 为子组定义一个自定义属性, 使用属性赋值的方式将父组件变量赋值自定义属性.
   1.3 为子组件中的props属性定义一个数组, 组件中以字符串形式存放上面接收变量的自定义属性名.
   1.4 在子组件中便可以通过插值语法, 属性赋值语法调用自定义属性, 得到父组件传递的值. 
       一次传递一个, 创建多个就把值封装成一个对象.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据传递</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <p>父组件: <input type="text" v-model="text"> --> {{text}}</p>
    <!--自定义一个属性, 保证属性名和props中的属性名和变量名一致即可-->
    <xx1 :my_text="text"></xx1>
</div>

<script>

    // 定义局部组件, 组件名不能和html自带的标签重名
    // 组件1
    Vue.component('xx1',
        {
            // 定义模板, 只能管理一个标签, 可以在标签中嵌套标签
            template: `
              <div>
              <p style="size: 30px; color: aqua">子组件:{{ my_text }}</p>
              </div>
            `,

            // 保证属性名和props中的属性名和变量名一致即可
            props: ['my_text']
        }
    )

    var vm = new Vue({
        el: '#box',
        data: {
            text: ''
        },
    })
</script>
</body>
</html>

2022-05-08_00554

6.2 子组件传值给父组件
子组件传值给父组件
	1.1 子组件中, 使用v-model对数据进行双向绑定, 在设置一个提交按钮
	1.2 为按键绑定一个点击事件, 在点击事件中使用 this.$emit('事件名', 参数1..)触发父组件的事件
	1.3 使用子组件, 为子组件标签定义一个自定义事件并绑定一个父组件的方法.
	1.4 在父组件中使用的参数及是子组件的数据, 通过该数据改变父组件的数据.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据传递</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <xx1 @transfer="update_text"></xx1>
    <hr>
    <p>父组件</p>
    <p>接收的值:{{text}}</p>
</div>

<script>

    // 定义局部组件, 组件名不能和html自带的标签重名
    // 组件1
    Vue.component('xx1',
        {
            template: `
              <div>
                  <p>子组件</p>
                  <p><input type="text" v-model="text"> --> {{ text }}</p>
                  <p>
                    <button @click="text_submit">提交数据给父组件</button>
                  </p>
              </div>
            `,

            data() {
                return {
                    text: ''
                }
            },
            // 定义子组件方法, 触发父组件的方法
            methods: {
                text_submit() {
                    // this.$emit 触发父组件的事件, ('自定义事件名', 参数1, ...)
                    this.$emit('transfer', this.text)
                }
            }

        }
    )
    var vm = new Vue({
        el: '#box',
        data: {
            text: '',
        },
        // 定义父组件方法
        methods: {
            // 更新数据, 接收参数
            update_text(text) {
                // 将参数作为更新的值
                this.text = text
            }
        }
    })
</script>
</body>
</html>

2022-05-08_00556

GIF 2022-5-8 13-17-01

6.3 ref属性
1. 在标签中定义ref属性, 该属性是Vue提供的. ref='键'
2. 在定义之后, 该标签被打包成一个对象的值.  ref='键: 标签对象{属性: 值, ..}'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref属性</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="text" ref="my_input" value="123">
    <button @click="button_c">按键</button>
</div>

<script>

    var vm = new Vue({
        el: '#box',
        methods: {
            button_c() {
                // this.$refs, 查看所有标签中定义了ref属性的标签对象, 键为ref的值, 值为定义了ref属性的标签 {my_input: input}
                // 标签对象中存放了该标签所有的属性与值 input对象{属性 :值, ...}
                console.log(this.$refs)  // {my_input: input}
                console.log(this.$refs.my_input)  // <input type="text" value="123"> 默认展示定义的属性与值, 没有展示的也可以直接取到
                console.log(this.$refs.my_input.value)
            }
        }
    })
</script>
</body>
</html>

2022-05-08_00557

input中存放了所有的属性, 默认展示标签中定义的属性与值.
6.4 ref数据传递
ref定义在子组件中, 那个就可以拿到整个子组件对象. 相当于父组打开了一条通往子组件通道.
子组件没打打开父组件的通道.拿不到Vue对象.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref属性</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!-- 子组件 -->
    <Subassembly ref="my_subassembly"></Subassembly>
    <hr>
    <!-- 父组件 -->
    <button @click="button_c">按键</button>
</div>

<script>
    Vue.component('Subassembly', {
            template: `
              <p>子组件展示的信息:{{ text }}</p>
            `,
            data() {
                return {
                    text: '子组件'
                }
            },

            methods: {
                print_text() {
                    console.log('子组件的方法!')
                }
            }
        }
    )
    var vm = new Vue({
        el: '#box',
        methods: {
            button_c() {
                // 在父组件拿到子组件对象
                let my_subassembly = this.$refs.my_subassembly
                console.log(my_subassembly)

                // 修改子组件中的值 子组件对象.data中定义的属性
                my_subassembly.text = '你好啊'

                // 调用子组件中的方法 子组件对象.methods中定义的方法
                my_subassembly.print_text()
            }
        }
    })
</script>
</body>
</html>

2022-05-08_00558

6.4 $on的使用
$on用于监听当前实例对象的自定义事件, 事件可以由vm.$emit触发.
vm.$emit('事件名', 参数1, ...)
$on('事件名', 函数(参数1, ...))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <module1></module1>
    <module2></module2>
</div>
</body>
<script>
    // 1. 定义一个vue对象
    var bus = new Vue()

    // 定义组件1
    Vue.component('module1',
        {template:`<div>发送信息:<input type="text" v-model="text"> <button @click="Click1">提交</button></div>`,
        data(){ return {text: ''}},
        methods:{Click1(){bus.$emit('submit', this.text)}}
        })

    Vue.component('module2',{
        template: `<div>接收信息:{{text}}</div>`,
        data(){return{ text: ''}},
        mounted(){bus.$on('submit', (args)=>{this.text = args})}
    })

    var vm = new Vue({
        el: '#box',
    })
</script>
</html>

image-20220508191023877

7. 动态组件

多个组件切换, 通过动态组件的:is来决定显示哪个组件

1. 定义对个组件
2. component标签中 :is的值是那个组件就会展示那个组件.
<component :is="sho"></component>
3. 通过动态改变sho的值切换使用的组件

menu_Zh = {
    'home':
        '主页', 'order':
        '订单', 'commodity':
        '商品'
}

for (i in menu_Zh) {
    console.log(i, typeof i)
    console.log(menu_Zh.i)  // 遍历对象, 这样是取不出值的 menu_Zh.home 与 menu_Zh.'home' 是不一样的
    console.log(menu_Zh[i])
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <!-- 删除无序列表的项目符号  横向排序-->
        <li style=" list-style-type:none; display:inline;" v-for="i in menu_list"
            @click="ClickA(i)"> {{menu_Zh[i]}}
        </li>
    </ul>

    <!--展示的组件-->
    <component :is="sho"></component>
</div>

<script>
    // 定义三个组件
    Vue.component('home', {
        template: `
                <div style="height: 400px; width: 800px; background-color: aqua">
                    <p>首页内容</p>
                </div>
            `
    })

    Vue.component('order', {
        template: `
                <div style="height: 400px; width: 800px; background-color: fuchsia">
                    <p>订单内容</p>
                </div>
            `
    })

    Vue.component('commodity', {
        template: `
                <div style="height: 400px; width: 800px; background-color: orange">
                    <p>商品内容</p>
                </div>
            `
    })

    var vm = new Vue({
        el: '#box',
        data: {
            menu_list: ['home', 'order', 'commodity'],
            menu_Zh: {'home': '主页', 'order': '订单', 'commodity': '商品'},
            sho: 'home'
        },
        //
        methods: {
            ClickA(i) {
                //   首页  订单 商品
                this.sho = i
            }
        }
    })
</script>
</body>
</html>

GIF 2022-5-8 15-54-16

8. keep-alive

keep-alive: 组件切换的时候数据不销毁.

在页面切换的时候, 之前页面中输入的信息不会被保存. 
使用keep-alive标签, 包裹需要要保留信息的标签, 输入的值再切换页面会被保留.

GIF 2022-5-8 15-58-59

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref属性</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <!-- 删除无序列表的项目符号  横向排序-->
        <li style=" list-style-type:none; display:inline;" v-for="i in menu_list"
            @click="ClickA(i)"> {{menu_Zh[i]}}
        </li>
    </ul>

    <!--展示的组件-->
    <keep-alive>
        <component :is="sho"></component>
    </keep-alive>
</div>

<script>
    // 定义三个组件
    Vue.component('home', {
        template: `
                <div style="height: 400px; width: 800px; background-color: aqua">
                    <p>首页内容</p>
                    <input type="text" style="margin-left: 30px ">
                </div>
            `
    })

    Vue.component('order', {
        template: `
                <div style="height: 400px; width: 800px; background-color: fuchsia">
                    <p>订单内容</p>
                </div>
            `
    })

    Vue.component('commodity', {
        template: `
                <div style="height: 400px; width: 800px; background-color: orange">
                    <p>商品内容</p>
                </div>
            `
    })

    var vm = new Vue({
        el: '#box',
        data: {
            menu_list: ['home', 'order', 'commodity'],
            menu_Zh: {'home': '主页', 'order': '订单', 'commodity': '商品'},
            sho: 'home'
        },
        //
        methods: {
            ClickA(i) {
                //   首页  订单 商品
                this.sho = i
            }
        }

    })
</script>
</body>
</html>

GIF 2022-5-8 15-59-48

9. 插槽

<组件>写内容</组件> --> 内容无效
组件中定义插槽 --> 内容替换到插槽中
具名插槽 --> 给插槽起名字--> 使用的时候, 指定替换哪个插槽的内容
9.1 插槽的使用
自定义的组件在使用的时候, 标签中写内容是没有作用的.
插槽: 在组件的模板中是定义<slot>插槽标签, 使用组件标签中时写的内容会替换<slot>标签.
插槽的位置很重要, 依据插槽的位置替换内容.
<xxx 子组件> 
	<xx></xx>
</xxx 子组件>

组件模板中
`
	<slot>	</slot>
`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <Subassembly>
        <p>账户: <input type="text"></p>
        <p>密码: <input type="text"></p>
    </Subassembly>
</div>

<script>

    Vue.component('Subassembly', {
        template: `
            <div>
                 <h1>子组件</h1>
                 <slot></slot>
            </div>
            `
    })

    var vm = new Vue({
        el: '#box',
    })
</script>
</body>
</html>

image-20220508161601903

9.2 具名插槽
在子组件的模板中可以定义多个插槽, 为了区分使用, 可以为插槽起名字.
在使用子组件标签的使用, 内容指定使用的插槽.
<xxx 子组件> 
	<xx slot='指定名称'></xx>
</xxx 子组件>

组件模板中
`
	<slot name='起名字'>	</slot>
`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <!--导入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <Subassembly>
        <div slot="a">
            <p>账户: <input type="text"></p>
        </div>
        <div slot="b">
            <p>密码: <input type="text"></p>
        </div>

    </Subassembly>
</div>

<script>

    Vue.component('Subassembly', {
        template: `
            <div>
                 <slot name="a"></slot>
                 <h1>子组件</h1>
                 <slot name="b"></slot>
            </div>
            `
    })

    var vm = new Vue({
        el: '#box',
    })
</script>
</body>
</html>

image-20220508161934594

开局签到Python基础
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-实例生命周期钩子、条件/列表渲染、修饰符
abundoning的博客
03-14 550
Vue Vue实例生命周期钩子 概念： 实例生命周期钩子就是Vue实例在 " 某一个时间点 " 会自动执行的函数 特点： - 自动执行，不需要手动调用 - 不需要写在methods配置项里 生命周期函数数量：11 生命周期图示及相关注解 Vue模板语法 概念： V层中使用的Vue指令语法 所有的以 ' v-' 开头的指令语法，实际上底层都对应着JS表达式，因此能够实现M &gt; V ...
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
react函数组件，插槽、具名插槽、父传子传组件
qq_45422185的博客
12-24 270
react函数组件，插槽、具名插槽、父传子传组件
Vue - （生命周期钩子）
m0_57446146的博客
06-08 62
生命周期钩子的作用：页面加载的时候，主动执行某些程序。 之前通常都是事件触发才会调用某种方法，生命周期钩子可以解决这个。 new Vue（）创建一个实例
vue学习基础（6）生命周期钩子函数、slot插槽的使用、动态组件和缓存
Study_Live_Sun的博客
02-06 448
一、生命周期如下图，所有红色的函数为钩子函数 二、slot插槽的使用 基本用法如下： 父组件在子组件中插入内容 子组件，通过&lt;slot&gt;标签显示 复杂使用 在App.vue中使用slot进行占位、 子组件中使用name来进行区分 三、动态组件和缓存，component,keep-alive 子组件 子组件 FormHelpe...
vue脚手架学习总结，vue参数、基础指令、生命周期函数、组件、插槽（持续更新）
weixin_48179599的博客
06-20 7119
vue知识点 在html中vue如何使用 在script的src属性中引入vue.js文件点击下载vue.js 创建一个id为app的div容器 在script标签里，添加以下内容 new Vue({ el:"#app", //指定模板目标 data:{ //数据内容(以对象形式) msg:"又见面了Vue", newMsg:"我和我的&lt;b&gt;祖国&lt;/b&gt;", flag:true, titl
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue生命周期与钩子函数简单示例
12-29
本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;www.jb51.net vue生命周期与钩子函数...
Vue 2.0中生命周期与钩子函数的一些理解
08-30
主要给大家介绍了关于Vue 2.0中生命周期与钩子函数的相关资料，对大家学习或者使用vue2.0具有一定的参考学习价值，需要的朋友们下面随小编一起来看看吧。
VUE - 2 - vue基础
wendyGao_Yin的博客
02-17 605
vue 基础归纳总结，学习笔记。
Vue生命周期、钩子、路由
qq_51007706的博客
10-23 234
Vue生命周期、钩子、路由生命周期钩子路由 生命周期 Vue生命周期 vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。 钩子 8个钩子函数 beforeCreate 创建Vue实例之前 created 创建实例成功（一般在这里实现数据的异步请求） beforeMount 渲染DOM之前（加载组件第一次渲染） mounted 渲染DOM完成（加载组件第一次渲染） befor
Vue中created和mounted详解
qq_43985303的博客
02-06 5710
对浏览器来说，已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，而对于vue来说，在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了（关于这一点，在笔者测试中，在mounted方法中打断点然后run，依旧能够在浏览器中看到整体的页面）。通过浏览器的渲染过程，可以总结出created和mounted的使用场景。
【开发】3.4-Layout 组件
LuCh1Monster的博客
06-27 1833
文章目录1. ProLayout2. PageHeaderWrapper3. SettingDrawer Layout 组件 是 Pro v4 中新增的组件，与一般的组件不同，它非常重型，在其中集成了菜单、布局、页头、面包屑、设置抽屉等多种功能。 1. ProLayout 在 Ant Design Pro 中，默认使用了 pro-layout，打开 Pro 后我们可以看到这样的界面： 对于标题和 logo，Layout 提供了 title和 logo属性来自定，如果你有更强的定制需求，可以试试 menuH
VueJS页面渲染之后调用函数
Wisdom—Yoga—TaciturnKnight（WYT）
03-26 2万+
vue.js提供的mounted函数，表示挂载到实例上去之后调用该钩子，但是第一次进入页面访问正常，数据正常，当刷新页面后，方法 报401 未授权错误，此时查询官方api文档发现，有一个nextTick方法，意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。使用之后发现，不报错，方法执行正常。...
Vue在页面数据渲染完成之后调用
热门推荐
南宫凌萱的博客
02-08 5万+
在使用Vue框架的时候，有时候需要在Vue在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。之前在使用jquery的时候，有ready可以帮助我们实现，但是Vue不存在此类方法，我们需要结合watch和this.$nextTick()来实现。nextTick：在下次 DOM 更新循环结束之后执行延迟回调。watch：用于观...
vue2.0$nextTick监听数据渲染完成之后的回调函数
qq_40646986的博客
09-25 1623
vue里面本身带有两个回调函数： 一个是Vue.nextTick(callback)，当数据发生变化，更新后执行回调。 另一个是Vue.$nextTick(callback)，当dom发生变化，更新后执行的回调。 栗子： … {{item}} ... ![在这里插入图片描述](https://img-blog.csdn.net/20180925214030291?watermark/2...
Vue.js钩子函数的使用技巧和生命周期详解，刚写完一个项目。
牛老大啊的博客
12-19 4175
Vue.js中提供了许多函数，有一些函数非常有用，它将组件创建到完成渲染这段时间进行了无限放大，其实在这段时间内我们可以做好多工作，这在其他框架下是没有的，非常实用，先给一张生命树图示： 这是官网提供的钩子函数的树状图，红色的是我们可以利用的函数，绿色的是函数解析，蓝色的是函数执行时机，我们把它翻译成中文就是下面的：
Vue2，Vue3生命周期及其钩子函数
MiMeng的博客
04-15 3068
什么是vue生命周期 Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -&gt; 渲染、更新 -&gt; 渲染、卸载 等⼀系列过程，称为Vue的⽣命周期。 什么是生命周期钩子 在vue实例的生命周期中会提供一些特定阶段可供调用的函数，这些函数会被调用，程序员可在实例的对应生命周期阶段中进行操作 生命周期钩子 beforeCreate() 这个阶段属于页面初始化之前（vue实例化之前） 不能拿到数据，方法，Dom元素 不能获取到绑定实例的el created(
Vue开发技巧总结（三）自定义事件、长列表性能优化、函数式组件、作用域插槽
yw00yw的博客
07-10 343
自定义事件及事件总线 父子组件自定义事件 子组件：this.$emit("my-event") 发送事件 父组件：&lt;dialog-component @dialog-closed="eventHandler" /&gt; 监听事件 事件总线 可以将事件发送到同级、祖父母、层次结构中的任何其他组件 为此，我们可以使用一种称为事件总线的模式。在这里，我们创建了一个单独的Vue实例，以将事件传输到导入该事件的任何组件。 eventBus.js： // 首先，在新的模块文件中创建并导出Vue实例： imp
vue3 函数式组件
最新发布
10-12
Vue 3 中的函数式组件是一种优化技术，它可以减少组件实例化时的开销，特别是在需要大量渲染相同结构的组件时。函数式组件是无状态的，只接受 props ...但是，由于函数式组件没有实例，因此无法使用生命周期钩子函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值