vue 重温一下vue运行生命周期，与分子组件事件分发
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！使用 v-on 绑定自定义事件每个 Vue 实例都实现了事件接口 (Events interface)，即：使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件这是来自官方文档的api说明子组件要触发
·
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
使用 v-on 绑定自定义事件
每个 Vue 实例都实现了事件接口 (Events interface)，即：使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
这是来自官方文档的api说明
子组件要触发父级作用域（父组件）的methods 里面的函数方法？？
即，在子组件上，绑定自定义方法.如： v-on:kiss = “kissEvent”
这里的kiss，就是事件名，kissEvent 就是父级中的函数名
<div id="app" data-col="kfds">
<h2>{{name}}</h2>
<input type="text" v-model="name">
<test-com :name="name" v-on:kiss="kissEvent"></test-com>
<test-com></test-com>
<test-com></test-com>
</div>然后在component组件中，采用$emit 择机触发:
Vue.component('test-com',{
template : '<div><div class="kiss" @click="runtip">{{ifcc}}</div><p @click="news(name)">{{name}}</p></div>',
props : {
name : String
},
data () {
return {
ifcc : 1
}
},
methods:{
runtip () {
this.ifcc++
},
news(v){
this.$emit('kiss')
}
},
computed : {
ifcce () {
return this.name + this.ifcc
}
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-api</title>
<script src="vue.js"></script>
<style>
span {margin: 0 10px;display: inline-block; width: 120px; line-height: 1.5;color: #666}
.kiss{
display: inline-block;
background: #ddd;
border: 1px solid #ccc;
padding: 5px 15px;
}
</style>
</head>
<body>
<h1>vue - api</h1>
<div id="app" data-col="kfds">
<h2>{{name}}</h2>
<input type="text" v-model="name">
<ul>
<li v-for="it of list">
<span>code:{{it.code}}</span>
<span>name:{{it.name}}</span>
<span>selected:{{it.selected}}</span>
</li>
</ul>
<test-com :name="name" v-on:kiss="kissEvent"></test-com>
<test-com></test-com>
<test-com></test-com>
</div>
<script>
Vue.component('test-com',{
template : '<div><div class="kiss" @click="runtip">{{ifcc}}</div><p @click="news(name)">{{name}}</p></div>',
props : {
name : String
},
data () {
return {
ifcc : 1
}
},
methods:{
runtip () {
this.ifcc++
},
news(v){
this.$emit('kiss')
}
},
computed : {
ifcce () {
return this.name + this.ifcc
}
}
});
const app = new Vue({
data : {
name : "粮草",
list : "",
},
watch : {
name : function (val,old) {
// console.log("watch hook",val,old)
},
list : function (val) {
// console.log("watch list",val)
}
},
methods : {
add : function () {
console.log("事件配置：add事件")
},
fetchData () {
var self = this;
var xhr = new XMLHttpRequest();
xhr.open('get','http://10.148.60.223/api/account/preferences/lang');
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
console.log(xhr)
self.list = JSON.parse(xhr.responseText)
}
};
xhr.send();
},
kissEvent () {
console.log("fdsfdsfds")
}
},
/**
* vue 钩子
* --------------------------------------------------------------------------------------
*/
//钩子,在 data数据挂载到this根节点上之前，以及methods所有方法挂载到实例根节点之前
beforeCreate () {
console.log("1.beforceCreate hook");
try {
console.log(this.name); //测试undefined
this.add(); //this.add is not a function
}catch (e){
console.log(e)
}
},
//created 钩子 data,methods里面的这些events挂载完成,并且vue内容event，都初始化完成
created () {
console.log("2.created hook");
console.log(this)
try {
console.log(this.name); //测试undefined
this.add(); //this.add is not a function
this.fetchData();
}catch (e){
console.error(e)
}
},
//beforeMount 钩子,开始挂载已经编译完成的html,到对应的dom节点时触发的钩子函数, 而html还没有渲染到dom中,只是准备开始渲染了
beforeMount() {
console.log("3.beforeMount hook");
},
//mounted 钩子, 模板或者html编译完成,且渲染到dom中完成,可以做一些xhr数据, 在整个vue的生命周期中只执行一次
//在发送xhr后回调操作 不依赖dom的，推荐把xhr放到created生命中
mounted () {
console.log("4.mounted hook");
},
//数据发生变化后，更新之前
beforeUpdate () {
console.log("5.beforeUpdate hook")
},
//数据发生变化后，更新视图完成后
updated () {
console.log("6.updated hook");
var self = this;
},
//实例销毁前
beforeDestroy () {
console.log("7.beforeDestroy hook")
},
//实例销毁后
destroyed(){
console.log("8.destroyed hook")
console.log(this)
}
});
app.$mount('#app');
</script>
</body>
</html>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)