Vue组件的使用与传参

router.js中自定义组件

Vue组件的使用与传参_第1张图片

父页的JS中引入组件

Vue组件的使用与传参_第2张图片
在components中加要用的组件(components对象没有的话自行写上)

components{
	//导入进来的名字
	InfectionManagment
}

Vue组件的使用与传参_第3张图片

父页的CSS中引入组件

<组件名>

Vue组件的使用与传参_第4张图片

父组件向子组件传参

data() 中自定义变量
Vue组件的使用与传参_第5张图片
父组件中加上: :id=“自定义的变量”


Vue组件的使用与传参_第6张图片
子组件的JS中加上: props: [‘id’],
Vue组件的使用与传参_第7张图片
然后在子组件直接this.id就可以拿到父页定义的变量了

打印到控制台就更不用说了
Vue组件的使用与传参_第8张图片

你可能感兴趣的:(Vue框架)