Vue父子组件间传值方法集

props和$emit+事件

父传子

//父组件：
<vue-child :title="父组件变量"></vue-child>

// 子组件中：
export default {
  props: {
    title: {
      type: String,
      default: 'hello world'
    }
  }
}

子传父

//子组件：
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">传值给父组件</button>
</div>

<script>
	export default {
	    data() {
	        return {
	          // 默认
	          message: '我是来自子组件的消息'
	        }
	    },
	    methods: {
	      click() {
	            this.$emit('childFn', this.message);
	        }
	    }    
	}
</script>

//父组件
<div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
</div>

<script>
	export default {
	    // ...
	    data() {
	        return {
	             message: ''
	        }
	    },
	    methods: {
	       parentFn(data) {
	        this.message = data;
	      }
	    }
	}
</script>

父传子数据监听

//可以通过监听父组件传值的变化对数据进行操作
watch: {
    firstName(newValue, oldValue) {
         console.log(newValue,oldValue)
    }
  } 

$ parent/$children

父组件传值子组件

//父组件：
<div>
    <h1>这是父组件</h1>
    <vuechild></vuechild>
</div>


<script>
  // 引入子组件
  import vueChild from './Child'
  export default {
    name: 'Parent',
    components: {
      vuechild
    },
    data () {
      return {
        msg: 'data from parent'
      }
    },
    methods: {
      parentFn () {
        console.log('parent fun')
      }
    }
  }
</script>

//子组件：
<div>
    <h1>子组件</h1>
    <button @click="showParent">调用父组件的数据和方法</button>
</div>


<script>
  export default {
    name: 'Child',
    methods: {
      showParent () {
        // 获取到所有的父组件
        console.log(this.$parent)
        // 获取指定父组件中的指定数据
        console.log(this.$parent.msg)
        // 调用父组件的方法
        this.$parent.parentFn()
      }
    }
  }
</script>

子组件传值父组件

//子组件：

<div>
    <h1>子组件</h1>
</div>


<script>
  export default {
    name: 'Child',
    data () {
      return {
        msg: 'msg from child'
      }
    },
    methods: {
      childFn () {
        console.log('child fun')
      }
    }
  }
</script>

//父组件：
<div>
    <h1>父组件</h1>
    <vuechild></vuechild>
</div>


<script>
  // 引入子组件
  import vueChild from './Child'
  export default {
    name: 'Parent',
    components: {
      vuechild
    },
    mounted () {
      // 获取到所有的子组件，是一个数组
      console.log(this.$children)
      // 获取指定子组件中的指定数据
      console.log(this.$children[0].msg)
      // 调用子组件的方法
      this.$children[0].childFn()
    }
  }
</script>

$refs

//父组件：
 <!-- 父组件获取子组件的值 -->
 <v-header ref="getChild"></v-header>
 <button @click="getData">父组件获取子组件的值和方法</button>

<script>
	import Header from './header';
	export default {
	  data(){
	    return{
	        msg:'父组件数据'
	    }
	  },
	  components:{
	      'v-header':Header
	  },
	  methods:{
	      getData(){
	        this.$refs.getChild.childFn();
	      },
	      parentFn(){
	        alert('父组件')
	      }
	  }
	 
	 
	}
</script>

//子组件：
<div id="app1">
    {{msg}}
    <button @click="getParent()">获取付父组件的值和方法</button>
   	<hr>
</div>

<script>
	export default {
	  data(){
	    return{
	        msg:'子组件消息',
	    }
	  },
	  methods:{
	    childFn(){
	      alert(111)
	    },
	    getParent(){
	      alert(this.$parent.msg);
	      this.$parent.parentFn()
	    }
	  }
	 
	}
</script>

更多组件间通信方法请移步→vue组件间通信方法集传送门