长治在百度做个网站多少钱,电子商务网站建设的技术综述论文,专业购物网站建设价格,苏州网站建设哪家公司好父子组件传值
在Vue3中如果想对子组件进行传值操作#xff0c;则需要首先在const中定义多个响应式参数#xff0c;必须记住的是#xff0c;定义了响应式参数之后一定要在setup中return该参数#xff0c;否则上面的template中不会识别#xff0c;然后在template中定义
则需要首先在const中定义多个响应式参数必须记住的是定义了响应式参数之后一定要在setup中return该参数否则上面的template中不会识别然后在template中定义
subTableAModule :areaareaA:carNumcarNum
/其中area是传参的第一个参数的名字areaA是下面的响应式变量使用前面的冒号可以将其动态绑定在script中的areaA上。这样就实现了script和template之间的交互切记切记。相当于 v-bind:areaareaA 即areaA这个字符串在这里会直接绑定script中的areaA响应式对象。
setup() {const areaA ref(A);const areaB ref(B);const carNum ref(1)--------省略线---------return {areaA,areaB,carNum,}
}
在子组件中进行如下操作进行接收
export default {props:{area:{type: String,required: true},carNum:{type: Number,required: true},},// name: stockList, components: { TestModule, BugModule, AgeModule, },setup() {很有意思的是props是不需要放在setup中的实际上变量的形式和放不放在setup中其实关系不大。 在子组件的template中就可以这样写别忘了双引号能够被正常识别
el-table-column :labelarea aligncenter{{ }}模板插值语法和v-bind之间的区别
{{x}}只能在标签之间其会被Vue渲染为x变量的当前值而当x的值发生变化时模板中的对应部分也会发生更新。不能用在标签内部 例如
p{{x}}/p
// 在上文的情况下是可以进行渲染的
el-table-column label{{x}} aligncenter
// 而在标签中的时候是无法被识别且被渲染为变量x的:即v-bind则只能用于标签内部:lablex会使x变量动态绑定label注意双引号别忘了。 例如
el-table-column :labelx aligncenter
//在标签中上文是可以识别的
