Vue组件通讯方式

时间：2023-03-31 19:37:43 vue.js

父组件到子组件通过子组件的props选项传值接受父组件传来的值props中的数据可以直接在模板中使用注意：props不能相同name作为数据，会造成覆盖问题子组件设置方法Vue.component('my-com',{props:['title'],//propertytobeboundintheparentclasstemplate:'{{title}}'})父组件设置方法为自定义组件设置属性//Static属性设置，不能被操作修改//动态属性设置：表达式（一般静态值不通过动态属性绑定，且不可修改)//动态属性设置：data（父组件数据更新会使子组件更新同步ly)

newVue({...data:{item:{title:"实力内容3"}},components:{"my-com":{props:["title"],template:`

`}}})Props命名规则建议使用camelCase进行prop命名，使用kebab-case进行父组件绑定。为什么？子组件中，如果props中使用了kebab-case，prop作为属性时不能加"-"，prop为"my-title"时需要改为"{{myTitle}}"使用时的插值在处理父组件时，属性是用html写的，而html属性是不区分大小写的，所以camelCase会被识别为camelcase，这可能不是我们想要的camel-case。得到的子组件Vue.component("my-com",{props:["myTitle"],//{myTitle:String}也可以这样写template:`

//除了在slot中使用，还可以用于绑定动态属性

`})父组件

从父到子的单向数据流父子组件之间的所有props都是单向向下绑定的。这意味着它只能从父母传递给孩子，不能逆转（孩子影响父母）。说明：父组件的数据修改会自动绑定到子组件，子组件会更新。子组件的操作不能反向影响父组件。处理prop数据时，需要将子组件存入data或计算后运行Vue.component("my-com",{props:['initialTitle'],template:'

',data(){return{myTitle:this.initialTitle//保存属性，处理后放入插值}}})

varvm=newVue({data:{value:'WelcometoBeijing',},}).$mount("#app")组件也是一个vue实例，不管instance如何修改myTitle的属性，如何改变myTitle的数据，不会影响parent的数据。处理props数据的方法，this.myTitle="othercontent"直接修改props数据会产生警告this.initialTitle="othercontent"，建议使用data或者computed而不是直接修改（我没有出现).注意，如果prop是数组或对象，子组件的操作会影响父组件的状态。(引用)解决办法是保存下来复制到一个对象操作，obj_:Object.assign({},this.obj)对象不是整体传递的

//会受到影响

Vue组件通讯方式

{{title}}

{{myTitle}}

{{myTitle}}

{{myObj.name}}:{{myObj.age}}岁

购物车