您的位置：首页 > 产品设计 > UI/UE

vue 重温一下vue运行生命周期，与分子组件事件分发

2017-07-21 17:57 861 查看

我们知道，父组件是使用 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>
4000
;
</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航