示例代码
父组件代码
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<son :message="message" :userInfo="userInfo" @handleChangeNum="getChangeNum"></son>
<h3>父组件显示 {{count }} </h3>
</div>
</template>
<script>
import son from '@/components/son.vue';
export default {
name: 'HelloWorld',
components:{
son:son
},
props: {
msg: String
},
data(){
return {
message:"hello vue.js",
userInfo:{name:'wsc',age:18},
count:0
}
},
methods:{
getChangeNum(val){
this.count=val;
console.log('子传过来的值是:'+val);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
子组件代码
<template>
<div>
<h3>{{ message }}</h3>
<ul>
<li v-for="(item, index) in userInfo" :key="index">{{ item }}</li>
</ul>
<input type="button" value="点击" @click="handleChangeNum" />
{{ count }}
</div>
</template>
<script>
export default {
name: "son",
props: {
message: String,
userInfo: Object,
},
data() {
return {
count: 0,
};
},
methods: {
handleChangeNum() {
this.count++;
this.$emit("handleChangeNum", this.count);
},
},
};
</script>
<style>
</style>