vue组件3-父子组件props传参

来源:互联网 发布:2017淘宝店铺开店流程 编辑:程序博客网 时间:2024/06/05 18:28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件传参-props</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app1">
<parent></parent>
</div>
<script>
Vue.component('child', {
  // 声明 props
  props: ['message'],
  template: '<span>{{ message }}</span>'

})

//父子组件props传参子组件中可以使用props:['myMessage'],在父组件引用子组件时,使用my-message ="xx"

Vue.component('parent',{
template:'<div><child message="我是子元素"></child></div>'
})
new Vue({
el:"#app1"
})
</script>
</body>
</html>
原创粉丝点击