vue中通过props实现父组件向子组件传递参数

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

首先我们看一个例子

下面的例子是

• 父组件中的引入HelloWorld这个子组件
• 在子组件标签中用单项绑定绑定一个变量
• 在这里 , msg就是子组件中接受父组件变量值的变量
• text 就是在父组件中的data中定义的一个变量
• 这里的意思就是 , 把父组件中的变量text的值传递给子组件的变量msg
• 在子组件中 , 我们使用props: ['msg'],去获取父组件传递的值并将值赋值给子组件中的msg这个变量
• 这样 , 在子组件中就可以通过this.msg去拿到父组件传递的那个值了
• 这里需要注意 , 在子组件中 的data中不能有变量名和父组件绑定时候 : 后面的那个变量同名
• 除了用this.msg可以取到父组件传递过来的这个变量外 , 我们也可以使用{{msg}}来获取值

父组件代码

<template>
  <div id="app">
    <HelloWorld  :msg="text"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  data() {
    return {
      text:'我是父组件向下传递的信息'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子组件的代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['msg'],
  data () {
    return {
      message:"hello world"
    }
  },
  mounted(){
  	console.log(this.msg)
  }
}
</script>

这里需要注意一点就是 , 父组件中的 : 后面的变量不能和子组件中的data中的变量重复