SoFunction
Updated on 2025-04-04

An example of dynamic binding of parent-child component communication

As shown below:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id='app'>
  <!--The purpose here is to render the parent component to the page-->
  <father></father>
</div>
</body>
<script src="/vue/2.3.4/"></script>
<script type="text/x-template" >
  <div>
    <!--Implement a two-way binding here-->
    <!--parentMsgThe variable must be indataStatement，Otherwise, there will be an error，I'm wrong with this pit-->
    <input v-model="parentMsg">
    <br>
    <child :my-message="parentMsg"></child>
  </div>
</script>
<script type="text/x-template" >
  <div> {{'The data passed by the parent component is:'+ myMessage }} </div>
</script>
<script>

  ('father',{
// Here I directly wrote the template into the script tag in the front. It's a big piece of paper here, it's ugly    template:'#father',
    data:function(){
      return {
        parentMsg:''
      }
    }
  });

  //In Vue, the relationship between parent and child components can be summarized as props down, events up.  // The parent component passes data downward through props, and the child component sends messages to the parent component through events  ('child', {
    props: ['myMessage'],//The props option here is used to realize the communication between parent and child components. The passed message component is caught with curly braces.    template: '#child'
  });

  new Vue({
    el:'#app'
  })

</script>
</html>

The above example of dynamic binding of parent-son component communication is all the content I share with you. I hope you can give you a reference and I hope you can support me more.