vue.js基本使用 父子元件
阿新 • • 發佈：2019-02-11
/html/index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="main">
<me myage=100 name='xiaoxing' message='你好'></me>
</div>
</body>
</html>/js/index.js
import Vue from "vue"; /*引用元件*/ import me from '../components/me.vue'; /*例項化元件*/ let params = { el: '#main', components:{ 'me': me, } } new Vue(params);
/compont/me.vue
<template> <div> <myname v-bind:name="name" v-bind:message="message"></myname> <myage v-bind:myage="myage" ></myage> </div> </template> <script> import myname from './myname.vue'; import myage from './myage.vue'; export default{ props:['myage','name','message'], components:{ 'myname':myname,'myage':myage } } </script>
/component/myage.vue
<template>
<div>
我的年齡是{{myage}}
</div>
</template>
<script>
export default{
props:['myage'],
/*data:()=>{
return {
'myage':this.myage
}
}*/
}
</script>/components/myname.vue
<style> #example{color:red} </style> <template> <div id="example"> {{message}} - {{name}}</div> </template> <script> export default{ props:['message','name'] /*data:() => { return { message:'hello ', name: 'vue.js 2' } }*/ } </script>