Vue propsData传递数据

时间:2022-10-20 落叶~ 人气:0

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

加载全部内容