Vue_父向子组件传参

傷城~ 2022-05-22 13:17 192阅读 0赞

父向子组件传参经常用，比如说我们写了一个select组件，调用的时候需要向子组件传初始的数据。这就要父组件向调用的子组件传参  
  
**父向子传参**  
现在我们想要从当前页面往子组件传参，在标签中写上传参的数据：`<button v-bind:content="msg">`  
这时在子组件中调用this.msgfromfather是undefind 的，需要在子组件的export default 中加入props，表示接受来自父组件的参数，注意数组接受的是变量，要用引号。

export default{ props:['msgfromfather'], }

这样我们就完成了从父组件向子组件传参的目标了。  
效果：  
![这里写图片描述][70]  
需要注意的是，父组件向子组件传的参数，完全可以使用\{ \{\}\}，例如：

<h1>{ { msgfromfather }}</h1>

![这里写图片描述][70 1]  
这样一个 基本的父向子组件传参就完成了。

**细节补充：**  
1.父向子传参：

<counter count="helloworld" @inc="handerinc"></counter>           
     <counter :count="1"></counter> -->
     //父亲通过属性传递给子组件（加冒号与不加冒号的区别）
     //加冒号，后面跟的是表达式，不加传的是字符串。
     //v-bind:是可省略的

2.单向数据流的概念  
单向流的概念，父组件向子组件可以传值任何值，但是在子组件中不能直接对接受的数值直接修改，如果父组件的数据也在别的子组件使用，直接修改会造成错误。  
![这里写图片描述][70 2]  
所以会报警告，我们可以自定义一个变量值来接受父组件的参数，就可以任意修改了。

export default{ 
      data(){ return{ msg:this.msgfromfather, }
      },
      props:['msgfromfather'],
    //我们可以在子组件中用msg数据，并且可以任意修改。

[70]: /images/20220522/82e5e9060b464e7aafae356afb814557.png
[70 1]: /images/20220522/ff978162fbf74799bb564da0252ebea1.png
[70 2]: /images/20220522/65006edcbc7449babbba2e67f864a87a.png