vue中父组件向子组件传值，子组件向父组件传值，简洁易懂

Vue中父组件传值到子组件

Vue中父组件传值分为两步：
一、父组件中代码中，使用属性绑定向子组件传递数据，

如图, 其中，:titles="title"就是在将父组件的title属性值，传递到子组件所绑定的titles属性中，这时候，子组件就有了一个带有值的titles属性了

复制代码

<template>
  <div class="parent">
    <h1>我是父组件</h1>
    <childVue :titles="title" :contents="content"></childVue>
  </div>
</template>

<script>
import childVue from './child.vue'
export default {
  name: 'parant',
  components:{
    childVue
  },
  data() {
    return {
      content: "我是父组件传过来的内容"
    };
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.parent{
  width: 500px;
  height: 500px;
  background: rgb(146, 133, 133);
  
}
</style>

二、子组件需要接收传过来的属性值

如下代码，子组件需要使用props属性去接受刚刚父组件传递过来的属性titles和contents，需要定义一下属性类型哦

复制代码

<template>
  <div class="child">
    <h2>我是子组件</h2>
    <h4>{{titles}}</h4>
    <h4>{{contents}}</h4>
  </div>
</template>

<script>
export default {
  name: 'helloChild',
  props: {
    titles: String,
    contents: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.child{
  width: 400px;
  height: 300px;
  background: rgb(157, 117, 117);
}
</style>

总结一下：

父组件中引入子组件、注册子组件，tempalte中使用子组件； import 、components、

子组件： props中创建一个属性，接受父组件传的值；

在template中使用 {{contents}}；

父组件中的，：title与子组件中prop添加的属性名称要一致；

="title"与父组件中data数据中的title名称要一致；

props绑定的写法也可以写成这样的形式

复制代码

 props: {
    title: {
      type: String,  // [String, Number],
      default: 1
    }
  }

Vue中子组件传值到父组件

子组件传值到父组件也有两步。
一：子组件通过$emit触发一个自定义事件，传递属性出去

如下，通过按钮（也可以其它方式，能触发 $emit即可），触发$ emit方法，传递datas的值出去

复制代码

<template>
  <div>
    <h1>children</h1>
      <button @click="sendTOParent">向父组件传值</button>
  </div>
</template>>
<script>
export default {
  data() {
    return {
      datas: "子组件中的信息"
    };
  },
  methods:{
        sendTOParent(){
            this.$emit('listenToChildEvent',this.data)
        }
    }
};
</script>>

2.在父组件中引用子组件的标签中，使用v-on监听该自定义事件并添加一个响应该事件的处理方法

复制代码

<template>
  <div>
    <h1>我是父组件</h1>
    <children v-on:listenToChildEvent = 'showMsgfromChild'></children>
  </div>
</template>>
<script>
import Children from "./Children";
export default {
  data() {
    return {
    };
  },
   methods:{
        showMsgfromChild(data){
            console.log(data)
        }
    },
   components: {
    Children
  },
};
</script>

总结：

子组件通过$emit传递参数出去，在父组件中引用子组件的标签中，使用v-on监听该自定义事件并添加一个响应该事件的处理方法