vue2 组件传递数据

向子组件传递数据通过Props

1.创建子组件

详细步骤：
1.在components创建子组件
2.等父组件接受到参数后通过Props来接受父组件传递过来的数据

<template>
    <div id="app">
        <h2>title:{{ title }}</h2>
        <p>tips:{{ tips }}</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
        }
    },
    props:['title','tips']
}
</script>

2.创建父组件

详细步骤：
1.导入子组件页面路径
2.在components注册组件
3.创建子组件标签
4.在子组件标签接受子组件传递过来的数据

<template>
  <div id="app">
    <my-component />
    <!-- <HelloWorld /> -->
    <hello-world />
    <my-son  title="标题" :tips="tips"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import MySon from './components/MySon.vue'
export default{
  name:'App',
  components:{HelloWorld,MySon},
  data(){
    return{
      tips:'一个友好的提示语'
    }
  }
}
</script>
  
<style>

</style>

效果图

父传子优化代码

如果传入的prop很多，可以使用传入整体props对象

案例 父组件输入的内容在子组件展示

子组件
子组件有哪些操作？
1.创建一个新的页面
2.用props来接受父页面传递的参messageFormParent
3.使用{{}} 来展示内容

<template>
    <div id="app">
        <h3>this is parent component</h3>
        <input type="text" >
        <p>收到父组件的消息 {{ messageFormParent }}</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
        }
    },
    props:['messageFormParent'],
}
</script>

父组件
1.导入子组件页面
2.注册子页面
3.创建子组件标签
4.在子组件标签中 通过v-bind绑定数据，通过messageFormParent传递出去
5.组件中双向数据绑定 ：这个是父组件input输入框,子组件也跟着展示，父组件通过v-model来绑定

<template>
  <div id="app">
    <h3>this is parent component</h3>
    <input type="text" v-model="message">
    <p>收到子组件的消息</p>
    <my-son :messageFormParent="message" />
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default{
  name:'App',
  components:{MySon},
  data(){
    return{
      message:''
      }
    }
  }
</script>
  
<style>

</style>

案例 子组件输入的内容在父组件展示 两种写法

第一种写法 通过v-bind绑定事件和v-on监听事件

操作步骤：
1.子组件input输入框通过v-model双向数据绑定；再通过按键事件来监听输入的内容
2.父组件在子组件标签里通过v-bind绑定事件和v-on监听事件
3.在子组件内通过按键监听事件用$emit来接收父组件传递过来的事件和要给父组件传递过去的参数
4.父组件通过监听事件展示子组件传递过来的数据展示
子组件

<template>
    <div id="app">
        <h3>子组件页面</h3>
        <!-- 子组件通过v-model双向数据绑定把消息传递给父组件 -->
        <!-- 通过keyup事件来监听这个输入的内容 -->
        <input type="text"  v-model="message" @keyup="send">
        <p>收到父组件的消息 {{ messageFormParent }}</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
            message:'',
        }
    },
    props:['messageFormParent'],
    methods:{
        // 通过$emit向父组件传递消息
        send(){
            // reveiveOn:父组件传递过来的事件  message要传递的参数
            this.$emit('reveive',this.message)
        }
    }
}
</script>

父组件

<template>
  <div id="app">
    <h3>父组件页面</h3>
    <input type="text" v-model="message">
    <p>接收到子组件的消息:{{ messageChild }}</p>
    <my-son :messageFormParent="message" v-on:reveive ="reveive"/>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default{
  name:'App',
  components:{MySon},
  data(){
    return{
      message:'',
      messageChild:'',
      }
    },
    methods:{
      // 接受一个自定义事件来接收函数
      reveive(data){
        // 接受子组件传递过来的参数
        this.messageChild = data
      }
    }
  }
</script>
  
<style>

</style>

也可以通过v-model 双向数据绑定绑定

子组件

<template>
    <div id="app">
        <h3>子组件页面</h3>
        <!-- 子组件通过v-model双向数据绑定把消息传递给父组件 -->
        <!-- 通过keyup事件来监听这个输入的内容 -->
        <input type="text"  v-model="message" @keyup="send">
        <!-- <p>收到父组件的消息 {{ messageFormParent }}</p> -->
        <p>收到父组件的消息 {{ value  }}</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
            message:'',
        }
    },
    // props:['messageFormParent'],
    props:['value'],
    methods:{
        // 通过$emit向父组件传递消息
        send(){
            // reveiveOn:父组件传递过来的事件  message要传递的参数
            this.$emit('input',this.message)
        }
    }
}
</script>

父组件

<template>
  <div id="app">
    <h3>父组件页面</h3>
    <input type="text" v-model="message">
    <p>接收到子组件的消息:{{ messageChild }}</p>
    <!-- <my-son :messageFormParent="message" v-on:reveive ="reveive"/> -->
    <my-son v-model="messageChild"/>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default{
  name:'App',
  components:{MySon},
  data(){
    return{
      message:'',
      messageChild:'',
      }
    },
    methods:{
      // 接受一个自定义事件来接收函数
      reveive(data){
        // 接受子组件传递过来的参数
        this.messageChild = data
      }
    }
  }
</script>
  
<style>

</style>