17vue學習_最簡單的父子元件
阿新 • • 發佈：2021-02-09
技術標籤：VUE
1、建立子元件
//1.建立第1個元件構造器物件（子元件）
const cpnC1 = Vue.extend({
//...
});2、建立父元件，並呼叫
//2.建立第2個元件構造器物件（父元件） const cpnC2 = Vue.extend({ //注意，使用了tab鍵上面的反斜槓``，因而可以換行定義 template: ` <div> <h2>我是標題2</h2> <p>這是內容，第2個元件1</p> <cpn1></cpn1> </div>`, // 父子元件 components:{ cpn1: cpnC1 } });
3、註冊父元件
//root元件 const chen1 = new Vue({ el: '#app', //用於掛載要管理的元素 data:{//定義資料 message:'你好啊，helloword', isShow: true }, // // 以下是區域性元件的用法 // components:{ // my_cpn1: cpnC1, // my_cpn2: cpnC2 // } // 父子元件 components:{ cpn2: cpnC2 } });
4、完整程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> </head> <body> <div id ="app"> <!-- 3.使用元件 --> <cpn2></cpn2> </div> <script src="../js/vue.js"></script> <script> //1.建立第1個元件構造器物件（子元件） const cpnC1 = Vue.extend({ //注意，使用了tab鍵上面的反斜槓``，因而可以換行定義 template: ` <div> <h2>我是標題1</h2> <p>這是內容，第1個元件1</p> </div>` }); //2.建立第2個元件構造器物件（父元件） const cpnC2 = Vue.extend({ //注意，使用了tab鍵上面的反斜槓``，因而可以換行定義 template: ` <div> <h2>我是標題2</h2> <p>這是內容，第2個元件1</p> <cpn1></cpn1> </div>`, // 父子元件 components:{ cpn1: cpnC1 } }); // //2.註冊元件 // Vue.component('my-cpn',cpnC); //root元件 const chen1 = new Vue({ el: '#app', //用於掛載要管理的元素 data:{//定義資料 message:'你好啊，helloword', isShow: true }, // // 以下是區域性元件的用法 // components:{ // my_cpn1: cpnC1, // my_cpn2: cpnC2 // } // 父子元件 components:{ cpn2: cpnC2 } }); </script> </body>
