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>
转载于:https://www.cnblogs.com/leiting/p/8145448.html
