Vue之組件詳解
<body> <div id="root"> <h2>{{name}}</h2> <hr> <school></school> <hr> <student></student> <hr> <!-- <h2>學生姓名:{{name}}</h2> <h2>學生年齡:{{age}}</h2> --> </div> <div id="root2"> <hello></hello> </div> <script> Vue.config.productionTip = false; //創建school組件 //el:'#root' //組件定義時 一定不要寫el配置項,因為最終所有的組件都要被一個vm管理 由vm決定服務於哪個容器 const school = Vue.extend({ template: ` <div> <h2>學校名稱:{{schoolName}}</h2> <h2>學校地址:{{address}}</h2> <button @click="showName">點我提示學校名稱</button> </div> `, data() { return { schoolName: '二中', address: '北京', } }, methods: { showName() { alert(this.schoolName) } } }) //第一步:創建組件 //創建學生組件 const student = Vue.extend({ template: ` <div> <h2>學生姓名:{{name}}</h2> <h2>學生年齡:{{age}}</h2> </div> `, data() { return { name: '小王', age: 20, } } }) //創建vm new Vue({ el: '#root', data: { name: '你好,世界!' }, //第二步:註冊組件(局部註冊) components: { school, student } }) const hello = Vue.extend({ template: ` <div><h2>你好鴨!王同學</h2></div> ` }) Vue.component('hello', hello) new Vue({ el: '#root2' }) </script> </body>
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!