1、父组件向子组件传值
例如app.vue是父组件,v-header.vue是子组件,实现app向v-header传值父组件需要自定义自己的title值,
子组件v-header内容
<template> <div class="v-title"> <div> <span>{{title}}</span> </div> </div> </template> <script> export default{ props:['title'], //声明title data (){ return {} } } </script>
父组件app.vue内容
<template> <div class="app"> <vHeader :title="Name"></vHeader> //在这里传值给子组件 </div> </template> <script>
import vHeader from '@components/header/v-header' //注册header组件
export default{
components:{vHeader}, //注册header组件 data (){ return {
Name:'我是首页' //最终显示在app.vue的title就是这个
} } } </script>
2、子组件向父组件传值
$.emit用法
this.$emit(event,...args); /* event: 要触发的事件 args: 将要传给父组件的参数*/
父组件app.vue内容
<template> <div class="app"> <city @changeCity="changeCityName"></city> </div> </template>
<script>
import city from '@/components/city' //把子组件city导入
export default{ data (){ return {
} },
methods:{
changeCityName(val){
this.name=val
}
}
} </script>
子组件city.vue内容
<template> <div class="city"> <city>{{changecity}}</city> </div> </template> <script> export default{ data (){ return { } },
compute:{ //选中子组件里的值,赋给父组件
this.name=this.cityname;
return this.name
}, methods:{ changeCity(val){ this.name=val; this.$emit('changeCity',this.name); //把子组件的值传给父组件 } } } </script>