- 父组件向子组件传值
父组件通过属性绑定,子组件通过props来接收数据进行传值
子组件设置props:
子组件代码如下:
<template>
<div>
<h2>子组件</h2>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
props:["message"]
}
</script>
父组件先引入子组件,而后进行属性绑定
父组件代码如下:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<child :message="msg"></child>
</div>
</template>
<script>
import child from "./child"
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components:{
child
}
}
</script>
- 子组件向父组件传值
子组件主要通过事件传递数据给父组件
子组件通过事件,使用$emit传递
子组件代码如下:
<template>
<div>
<h2>子组件</h2>
<p>{{message}}</p>
<label>
<span>用户名:</span>
<input type="text" v-model="username" @change="set_username">
</label>
</div>
</template>
<script>
export default {
data(){
return {
username:'',
}
},
methods:{
set_username(){
this.$emit('trans_user',this.username)
}
},
props:["message"]
}
</script>
父组件部分:
声明了一个方法 get_username,用 trans_user事件调用 get_username方法,获取到从子组件传递过来的参数 username
父组件代码如下:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<child :message="msg" @trans_user="get_username"></child>
<div>
用户名为:{{user}}
</div>
</div>
</template>
<script>
import child from "./child"
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App',
user:''
}
},
methods:{
get_username(info){
this.user = info;
}
},
components:{
child
}
}
</script>
get_username方法中的参数 info就是从子组件传递过来的参数 username
目录:
事例的组件目录,引入子组件时注意路径正确