目录
  • Vue选项
    • propsData进行传递数据
  • Vue.extend全局扩展的数据传递propsData

    Vue选项

    propsData进行传递数据

    使用全局扩展器时可以利用propsData传递数据

    先自定义header标签，利用Vue.extend进行扩展构造器，往扩展构造器传递数据时，需要在挂载时调用propsData传递数据。

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>propsData属性</title>
		<script src="https://www.freexyz.cn/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>

    运行结果：

    Vue选项之propsData传递数据方式

    附加：

    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="https://www.freexyz.cn/dev/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选项之propsData传递数据方式

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

    声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。