Home > Web Front-end > JS Tutorial > body text

How to use vue.js to realize $refs and $emit parent-child component interaction

亚连
Release: 2018-06-19 16:11:10
Original
1498 people have browsed it

This article mainly introduces the interaction method between vue.js $refs and $emit parent-child components. Now I share it with you and give it a reference.

This article introduces the interaction method between vue.js $refs and $emit parent-child components. I would like to share it with you. Without further ado, just look at the code:

<strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template>
 <p id="app">
  <input type="button" name="" id="" @click="parentCall" value="父调子" />
  <hello ref="chil" />//hello组件
 </p>
</template>
<script>
 import hello from &#39;./components/Hello&#39;
 export default {
  name: &#39;app&#39;,
  &#39;components&#39;: {
   hello
  },
  methods: {
    parentCall () {
      this.$refs.chil.chilFn(&#39;我是父元素传过来的&#39;)
    }
  }
 }
</script>
/*Hello.vue :*/
<template>
 <p class="hello"></p>
</template>
<script>
 export default {
  name: &#39;hello&#39;,
  &#39;methods&#39;: {
    chilFn (msg) {
      alert(msg)
    }
  }
 }
</script>
Copy after login
<strong>子调父 $emit (把子组件的数据传给父组件)</strong>
//ps:App.vue 父组件
//Hello.vue 子组件
<!--App.vue :-->
<template>
  <p id="app">
    <hello @newNodeEvent="parentLisen" />
  </p>
</template>
<script>
 import hello from &#39;./components/Hello&#39;
 export default {
  name: &#39;app&#39;,
  &#39;components&#39;: {
   hello
  },
  methods: {
   parentLisen(evtValue) { 
    //evtValue 是子组件传过来的值
    alert(evtValue)
   }
  }
 }
</script>
<!--Hello.vue :-->
<template>
  <p class="hello">
    <input type="button" name="" id="" @click="chilCall()" value="子调父" /> 
  </p>
</template>
<script>
 export default {
  name: &#39;hello&#39;,
  &#39;methods&#39;: {
   chilCall(pars) {
    this.$emit(&#39;newNodeEvent&#39;, &#39;我是子元素传过来的&#39;)
   }
  }
 }
</script>
Copy after login

The above is what I compiled for you. I hope it will be helpful to everyone in the future.

Related articles:

About how to merge Object values ​​when using JavaScript

How to implement verification in Angular

How to implement table sorting in Angular

How to use localstorage and sessionstorage in Vue

The above is the detailed content of How to use vue.js to realize $refs and $emit parent-child component interaction. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template