站长资源网络编程
Vue中父子组件的值传递与方法传递
简介一.Vue中父组件向子组件传值利用v-bind向子组件传值，子组件中利用props接受
{{name}}
<一.Vue中父组件向子组件传值
利用v-bind向子组件传值，子组件中利用props接受
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<!--注意点: 组件是可以使用自己的数据的-->
<p>{{name}}</p>
<p>{{age}}</p>
<!--这里将父组件的name通过parentname传递给了子组件-->
<son :parentname="name" :abc="age"></son>
</div>
</template>
<template id="son">
<div>
<!--这里通过parentname使用了父组件传递过来的数据-->
<p>{{parentname}}</p>
<p>{{abc}}</p>
</div>
</template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
data: function(){
return {
name: "wqd",
age: 21
}
},
// 子组件
components: {
"son": {
template: "#son",
//这里通过parentname接收了父组件传递过来的数据
props: ["parentname", "abc"]
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
});
</script>
二.Vue中父组件向子组件传递方法
父组件利用v-on传值，子组件this.$emit来接收
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<button @click="say">我是按钮</button>
<!--这里通过parentsay将父组件的say方法传递给了子组件-->
<son @parentsay="say"></son>
</div>
</template>
<template id="son">
<div>
<button @click="sonFn">我是按钮</button>
</div>
</template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
methods: {
say(){
console.log("helloworld")
}
},
// 子组件
components: {
"son": {
template: "#son",
/*
注意点: 和传递数据不同, 如果传递的是方法, 那么在子组件中不需要接收，需要在子组件自定义的方法中通this.$emit("自定义接收的名称")的方法来触发父组件传递过来的方法
*/
// props: ["parentsay"]
methods: {
sonFn(){
this.$emit("parentsay");
}
}
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
});
</script>
三.Vue中子组件向父组件传值
this.$emit中第一个参数为接收父组件传递的方法，第二个参数即为向父组件传递的值
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<button @click="say">我是按钮</button>
<!--这里通过parentsay将父组件的say方法传递给了子组件-->
<son @parentsay="say"></son>
</div>
</template>
<template id="son">
<div>
<button @click="sonFn">我是按钮</button>
</div>
</template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
methods: {
//data用来接受子组件传递的值
say(data){
console.log(data);
}
},
// 子组件
components: {
"son": {
template: "#son",
methods: {
sonFn(){
// 第一个参数: 需要调用的函数名称
// 后续的参数: 给调用的函数传递的参数
this.$emit("parentsay", "你好");
}
}
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
});
</script>