Vue选项之propsData传递数据方式
更新时间：2022年10月18日 10:22:18 作者：落叶~
这篇文章主要介绍了Vue选项之propsData传递数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue选项
propsData进行传递数据
使用全局扩展器时可以利用propsData传递数据
先自定义header标签，利用Vue.extend进行扩展构造器，往扩展构造器传递数据时，需要在挂载时调用propsData传递数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>propsData属性</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<header></header>
<script type="text/javascript">
var demo=Vue.extend({
template:`<p style="color:red">这是利用propsData传递数据-----{{demo}}---{{a}}</p>`,
data:function(){
return{
demo:'这里采用了插值的方式'
}
},
props:['a']
});
new demo({propsData:{a:'propsData设置值'}}).$mount('header')
</script>
</body>
</html>
运行结果：
附加：
propsData三步解决传值：
1.在全局扩展里加入props进行接收。propsData:{a:1}
2.传递时用propsData进行传递。props:[‘a’]
3.用插值的形式写入模板。{{ a }}
Vue.extend全局扩展的数据传递propsData
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<header></header>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var header_t = Vue.extend({
template: `
<div>header_t {{ a }}</div>
`,
props: ['a']
});
new header_t({propsData: {a: 1}}).$mount('header');
</script>
</body>
</html>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue动态路由配置，vue路由传参的方式，文中给大家提到了router-link这个组件的相关知识,需要的朋友可以参考下2018-05-05
这篇文章主要给大家介绍了关于vue中watch和computed的区别与使用方法的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-08-08
本文主要介绍了手把手教你写一个vue全局注册的Toast的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
vue组件vue-treeselect箭头和叉图标变大问题及解决
这篇文章主要介绍了vue组件vue-treeselect箭头和叉图标变大问题及解决方案，具有很好的参考价值，希望对大家有所帮助。2022-07-07
这篇文章主要介绍了如何基于Electron和Vite快速构建Vue3桌面应用，本文主要技术栈就是Vue3、vite、Electron，文中有详细的代码示例,需要的朋友可以参考下2023-07-07
element-plus结合sortablejs实现table行拖拽效果
使用element-plus的el-table组件创建出来的table,结合sortable.js实现table行拖动排序,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的同学可以自己动手试一试2023-10-10
本文给大家分享的是如何使用vue实现鼠标点击选中的效果，附上了实例代码，有需要的小伙伴可以参考下2020-10-10
这篇文章主要为大家详细介绍了Vue实现炫酷的代码瀑布流背景，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
提起帮助文档，想必大家都会想到 VuePress等。但是VuePress是“静态网站生成器”，需要我们自行编写文档，然后交给VuePress变成网站。因此，本文将用vite2+Vue3编写一个在线帮助文档工具，需要的可以参考一下2022-03-03
最新评论