<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 子组件和父组件传递数据与方法</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script>
Vue.component('parent',{
template:'<div><child :Name="name" :Age="age" @Add="add"></child></div>',
data(){
return {
name:'jcy',
age:30
}
},
methods:{
add(age){ //add方法接受子组件传递的数据
this.age = age
}
}
})
Vue.component('child',{
template:'<div><p>我叫:{{ Name }},我今年{{ Age }}</p><button @click="add">加一岁</button></div>',
props:{ //接受父组件传递的数据
Name:{
type:String,
default:'ok',
},
Age:{
type:Number,
default:18
},
},
methods:{
add() {
this.$emit('Add',this.Age += 1)//接受父组件传递的方法,并且带参数向父组件传送数据
}
}
})
var vm = new Vue({
el: '#app',
data(){
return {}
}
})
</script>
</body>
</html>
Vue 子组件和父组件传递数据与方法的例子
最新推荐文章于 2023-09-20 09:42:08 发布