Vuejs组件之间的通信
程序员文章站
2024-01-13 20:14:22
...
1.由父组件 传值 到子组件：（通过属性传值）
一共有7中定义component的方法，参考地址：https://medium.com/js-dojo/7-ways-to-define-a-component-template-in-vuejs-c04e0c72900d
(1)创建子组件 指定属性，把要传递的值给属性
<son name="值"></son>(2)在子组件内部声明props属性
props:['name']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue template</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="example">
{{myValue}}
<father></father>
</div>
<script type="text/x-template" id="father-template">
<div>
<h1>this is a father template component</h1>
<input type="text" v-model="kw">
<button @click="handleClick">clickMe</button>
<hr/>
<!--用 v-bind接收变化的值-->
<son :name="kw"></son>
</div>
</script>
<script type="text/x-template" id="son-template">
<div>
<h1>this is a son component</h1>
<span>{{'The data received is ' + name}}</span>
</div>
</script>
<script type="text/javascript">
//在组件中data属性必须是一个有返回值，并且返回值必须是对象方法
Vue.component('father',{
template:"#father-template",
data:function(){
return {
kw:''
}
},
methods:{
handleClick:function(){
console.log('data change');
}
}
});
Vue.component('son',{
props:['name'],
template:'#son-template'
});
new Vue({
el: "#example",
data: {
myValue: "test!"
}
}
);
</script>
</body>
</html>
2.子组件和父组件通信用event事件传值
步骤：通过事件传值，需要先约定事件的名称：toFather
(1)在调用的子组件中，绑定自定义的事件
<son @toFather="recEvent"></son>(2)在子组件中通过this.$emit方法来触发自定义事件，并传递值：
this.$emit('自定义事件名称'，'需要传递的值')
this.$emit('toFather',this.kw);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue template</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="example">
{{myValue}}
<father></father>
</div>
<script type="text/x-template" id="father-template">
<div>
<h1>father component</h1>
<span>{{'The msg from son:'+ msgFromSon}}</span>
<hr/>
<son @toFather="recEvent"></son>
</div>
</script>
<script type="text/x-template" id="son-template">
<div>
<h1>son component</h1>
<input type="text" v-model="kw">
<button @click="handleClick">sendToFather</button>
</div>
</script>
<script type="text/javascript">
Vue.component('father',{
template:'#father-template',
data:function(){
return {
msgFromSon:''
}
},
methods:{
recEvent:function(result){
this.msgFromSon = result;
}
}
});
Vue.component('son',{
template:'#son-template',
data:function(){
return {
kw:''
}
},
methods:{
handleClick:function(){
this.$emit('toFather',this.kw);
}
}
});
new Vue({
el: "#example",
data: {
myValue: "test!"
}
}
);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style></style>
</head>
<body>
<p>
3.ref 父组件操作子组件：
<子组件 ref="名称"></子组件>
在父组件中可以通过：this.$refs.名称.属性（方法名（））来获得子组件的数据
子组件操作父组件：
this.$parent.属性或者方法，来获得父组件中的数据
</p>
<div id="example">
{{msg}}
<father></father>
</div>
<script type="text/x-template" id="father-template">
<div>
<h1>This is father template component</h1>
<button @click="checkSonStatus">Check the son status</button>
<hr/>
<son ref="mySon"></son>
</div>
</script>
<script type="text/x-template" id="son-template">
<div>
<h1>This is son template</h1>
<button @click="checkFatherStatus">Check father status</button>
</div>
</script>
<script src="js/vue.js"></script>
<script>
Vue.component('father',{
template:'#father-template',
data:function(){
return {
name:'zhangsanfather'
}
},
methods:{
nowDoing:function(){
console.log("is speaking!");
},
checkSonStatus:function(){
var sonName = this.$refs.mySon.name;
console.log(sonName);
var sonStatus = this.$refs.mySon.nowDoing();
}
}
});
Vue.component('son',{
template:"#son-template",
data:function(){
return {
name:'zhangsan'
}
},
methods:{
nowDoing:function(){
console.log("is study ...");
},
checkFatherStatus:function(){
var fatherName = this.$parent.name;
console.log(fatherName);
var fatherStatus = this.$parent.nowDoing();
}
}
});
new Vue({
el: '#example',
data: {
msg: 'Hello component!'
}
});
</script>
</body>
</html> 下一篇： 编写事务相关的JUnit测试