Js--vue Parent-Child component communication

Communication between parent and child components is the transfer of private data, which is relatively easy to understand

Implementation method

• The parent component passes the value to the child component
  • Binding properties directly on a child component's label
  • Subcomponents declare props to receive properties of parent component pass-through values
• Child components passing values to parent components
  • Binding a method directly to a child component's label
  • The child component calls the method that the parent component binds through the $emit method, and passes the parameter the form to pass the value the goal, here the parameter number can be multiple, not fixed

Specific cases

• Props

<!--父组件--><template>    <span>父组件：</span>    <input type="text" v-model="pVal">    <son :textP=‘pVal‘></son></template><script>export default {  data() {    return {      pVal: 12    };  }</script>

<!--子组件 son--><template>    <div class="props">        <span>子组件：</span>        <input type="text" v-model="textP">    </div></template><script>export default {  props: ["textP"]};</script>

• $emit

<!--父组件--><template>    <son @pMethod=‘show‘></son></template><script>export default {  data() {    return {      pVal: 12    };  },  methods: {    show(data) {      this.pVal = data;    }  }};</script>

<!--子组件--><template>    <div class="props">        <span>子组件：</span>        <button @click="change">点击改变父组件的值</button>    </div></template><script>export default {  methods: {    change() {      this.$emit("pMethod", 19);    }  }};</script>

Summary analysis

• About subcomponents to the parent component, which is similar in form to JSONP, where the server will eventually reach cross-domain values through the form of a callback method to pass the data.

• In fact, this form is very similar to the WinForm inside the different window of the transfer value, but also through the method of passing parameters

Js--vue Parent-Child component communication