vue2 父给子传值 子给父传值

文档 Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

一，父给子传值

（案例一）

父组件

<template>
  <div id="app">
    <p>父组件</p>
    <p>------------------</p>
    <p>子组件</p>
     <Demo :list="list"></Demo><!-- 在父组件中利用:list="list"来传值-->
 </div>
</template>
<script>
import Demo from "./Demo.vue"
 export default {
     name: 'app',
     data(){
         return {
           list:{id:1,task:"设计产品原型"},
         }
       },
   components: {
     Demo
   } 
}
</script>

子组件

<template>
    <div id="myfooter">
       <p>{{list.id}}</p>
       <p>{{list.task}}</p>
   </div>
</template>
<script>
export default {
 name: 'Demo',
 props:["list"],//在子组件中利用props:["list"]来接收父组件传过来的值 ;在此必须加引号
 }


</script>

（案例二）

子组件

<template>
    <div class="child">
        {{ message }}
    </div>
</template>

<script>
export default {
    name: "Demo",
    props: {
        message: String,
    },
};
</script>

父组件

<template>
  <div class="father">
      <Demo :message="text" />
      <input v-model="data" />
      <button @click="changeDemo">点我改变子组件的值</button>
  </div>
</template>

<script>
import Demo from "./Demo.vue";
export default {
  name: "Father",
  components: { Demo },
  data() {
      return {
          data: "niha",
          text: "我是父组件的值",
      };
  },
  methods: {
      changeDemo() {
          this.text = this.data;
      },
  },
};
</script>

 

 

------------------------------------------------------------------------------------------------------------------------------

二，子给父传值 

子组件

<template>
    <div id="myfooter">
      <button @click="submit">提交</button>
    </div>
   
  </template>
   
  <script>
  export default {
    name: 'myfooter',
    data(){
      return {
        title:"我是子组件中的数据"
      }
    },
    methods:{
      submit(){
        this.$emit("submit",this.title)//在子组件中触发事件，格式为：this.$emit("事件名",要传的值)
      }
    }
  }
  </script>

父组件

<template>
  <div id="app">
    <p>{{content}}</p>
     <Demo @submit="aa"></Demo> <!--在父组件中接受值，格式为:@事件名 = "函数"  -->
 </div>
</template>
<script>
import Demo from "./Demo.vue"
 export default {
     name: 'app',
     data(){
         return {
           content:''
         }
       },
     methods:{
       aa(value){
         this.content=value;//在此value就是从子组件传过来的值
       }
     },
     components: {
       Demo
   } 
}
</script>

参考

vue传值之父子组件传值、bus传值、vuex传值、其他方式传值…_Jet_closer_burning的博客-CSDN博客

Vue中组件的五种传值方式_vue兄弟组件传值的五种方法_xdlhw1997的博客-CSDN博客