广州网站开发外包网站排名搜索

今天来讲讲父子传值中的几种方法~         

        项目中往往会把一些常用的公共代码抽离出来，写成一个子组件。或者在一个页面中的代码太多，可以根据功能的不同抽离出相关代码写成子组件，这样代码结构会更加简洁明了，后续维护更加方便。应用组件的时候就会涉及到组件之间相互传递参数以下进行简单的介绍,vue中的父子组件传值，要注意的是遵守单向数据流原则。所谓单向数据流原则，简单的说就是父组件的数据可以传递给子组件，子组件也可以正常获取并使用由父组件传过来的数据；但是，子组件中不能直接修改父组件传过来的数据，必须要向父组件传递一个事件来父组件需要修改数据，即通过子组件的操作，在父组件中修改数据；这就是单项数据流

子组件需要做的事：
①首先定义一个子组件叫son。
②在子组件里面设置一个data属性，当作父组件传过来的数值。
③用props声明一下这个数值是父组件传过来的参数。

父组件需要做的事：
①然后定义一个父组件叫father。
②引入子组件。
③注册子组件。
④使用子组件。
⑤给子组件绑定需要传过去的属性。

现在就说说这个父传子的方法：

传:

在"标签"上传属性

<Card :name="name"></Card>

接:

在props中

export default {props: {name: String},setup(props) {console.log(props.name);}
}

是不是很简单明了呢（有哪里不对或者不懂得，在评论区或者私信Q我哦~）

下面我们就说说子传父

传:

触发,给一个事件传值

setup(props,{emit}) {emit("get","传递的数据");}

接:

绑定传的时候起的事件名,接收参数

<Card @get="on"></Card>