<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://unpkg.com/vue" ></script>
</head>
<div id="app2">
.<!-- 如果要使用 props 来传递对象，就要使用 v-bind -->
<mycomponent :message="title" :mydata="{username:name,age:age}" name-style="color:red"></mycomponent>
</div>
<script>
// 定义一个组件
var myComponent = Vue.extend({
// 定义 props
props: {
message:"",
mydata:{},
//样式 ，如果这里使用驼峰标识 ，则在标签中使用就要使用 name-style 传递
nameStyle:{}
},
template: '<div>{{ message }} <div> <span v-bind:style="nameStyle">{{ mydata.username}}{{ mydata.age}}</span></div> </div>'
})
// 全局注册组件 组件的别名要是小写，否则会报错
Vue.component('mycomponent', myComponent)
var vm2 = new Vue({
el:'#app2',
data:{
title:"你好",
name:"lym",
age:18,
}
})
</script>
</body>
</html>
网友评论