vue 子组件获取prop的变化,vue里props
本文主要介绍了vue3中道具组件的撤销，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
道具组件提取介绍场景组件模板提取的编写方法
props组件抽离
引言
假设你已经知道了Vue3的设置功能。如果没有，可以先看看这篇文章。
vue3中设置功能的使用
在setup函数中，我们知道它有两个参数，分别是props，用来接收父组件传递的参数，以及context，负责表示上下文对象。在上下文中，emit是一个分发自定义事件的函数，通常用于组件抽象后的通信。
理解了概念之后，我们就可以抽象分离出本文中的一个组件了。
场景
现在，假设您需要抽象移动终端的顶部标题组件。首先，想一想一个top组件通常有哪些功能：名称、返回、返回主页，还有更多功能。
如果一个页面不需要使用返回主页的功能，可以不用传递参数就可以使用。
设置好道具后，在设置中打印道具，可以看到绑定成功的参数。
导出默认值{
道具：{
名称：{
类型：字符串，
默认值：“”
},
后退：{
类型：字符串，
默认值：“”
},
首页：{
类型：布尔型，
默认值：false
},
更多：{
类型：布尔型，
默认值：false
}
}
}
处理完props参数后，我们可以考虑上下文部分。例如，如果在单击fallback选项卡后触发了一个事件，则回调函数将被绑定到作为调用方的父组件中，并且该函数将在子组件发出后执行。
因此，声明要在与props相同的级别下发出的函数的名称。
把模板部分和脚本部分的代码贴在这里。
模板
header class= simple-header van-发际线-底部
我v-if=！home class= nbicon nbfanhui @ click= go back /I
i v-else class=nbicon nbhome/i
div class= simple-header-name { name } }/div
I v-if= more class= nbicon nbmore /I
/页眉
/模板
脚本
从“vue”导入{ ref }
从“vue路由器”导入{ useRouter }
导出默认值{
道具：{
名称：{
类型：字符串，
默认值：“”
},
后退：{
类型：字符串，
默认值：“”
},
首页：{
类型：布尔型，
默认值：false
},
更多：{
类型：布尔型，
默认值：false
}
},
发出：[callback]，
设置(道具、上下文){
const home=ref(props.home)
const more=ref(props.more)
const router=useRouter()
const goBack=()={
如果(！props.back) {
router.go(-1)
}否则{
router.push({ path: props.back })
}
context.emit(“回调”)
}
返回{
goBack，
家
}
}
}
/脚本
事实上，正确的方法应该是在拉出组件之前，在多个页面中进行编码。
不过这只是一个演示功能，所以我们提前把要提取的具体内容清理出来了。
接下来，在一些调用者组件中发布代码。
！-显示顶部标签名称-
S-header :name=“商品详细信息”/s-header
！-绑定子组件emit的方法，以及当子组件emit被拔出时触发close方法的方法-
S-header :name= 订单详细信息 @callback=关闭/s-header
！-将返回主页按钮设置为true -
S-header :name= 购物车 :home=true/s-header
这样，我们成功地提取了一个简单的组件，并通过父组件传递的值来不同地显示它。
当然，提现组件是可以进阶的，比如使用slot，用法和之前一样。
！-父亲-
S-header :name=关于我们
模板v形槽：测试
你好，黑猫，多么绯红！
/模板
/s-header
！儿子
插槽名称=测试/插槽
组件模板抽离的写法
方法一：使用JavaScript标签分隔模板方法二：使用模板标签分隔模板！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题/标题
/头
身体
div id=应用程序
cpn/cpn
tmp/tmp
/div
/body
script src= https://cdn . bootcss . com/vue/2 . 5 . 2/vue . min . js /script
script src= https://cdn . bootcss . com/vue-router/3 . 0 . 1/vue-router . min . js /script
script src= https://cdn . bootcss . com/vuex/3 . 0 . 1/vuex . min . js /script
/html
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。