vue框架之元件通訊及插槽簡介等相關內容-113

阿新 • • 發佈：2020-12-17

1 定義區域性元件

2 元件編寫方式與Vue例項的區別

1 自定義元件需要有一個root element，一般包裹在一個div中,跟vue例項一樣
2 父子元件的data是無法共享
3 元件可以有data，methods,computed....,但是data 必須是一個函式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
<div id="box">
  <navbar></navbar>
   {{aa}}
</div>

</body>
<script>
  Vue.component('navbar', {
    template: `
    <div>
      <button @click="handleClick">返回</button>
      我是NavBar{{aa}}
      <button style="background: red">主頁</button>
      <br>
      <child></child>
    </div>
  `,
    methods: {
      handleClick() {
        console.log('nav nav')
       },
     },
    components: {
      child: {
        template: `<button>兒子</button>`,
       }
     },
    data() {
      return {
        aa: 'lqz'
       }
     },
   })
  var vm = new Vue({
    el: '#box',
    data: {
      isShow: true,
     },
    methods: {
      handleClick() {
        console.log('根元件我被點選了')
       }
     },
   })

</script>
</html>

3 元件通訊之父傳子通訊

1 父子通訊
2 在全域性元件上自定義屬性
    <navbar myname="lqz" age="18"></navbar>
3 在元件中獲取
    props: ['myname','age'] #myname=lqz  age=18
    
4 區分開這兩種賦值方式
   <navbar myname="lqz" age="18"></navbar>
   <navbar :myname="'ffff'" age="19"></navbar>
   <navbar :myname="name" age="19"></navbar>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
<div id="box">
  <!--myname是自定義屬性-->
  <navbar myname="lqz" age="18"></navbar>
  <navbar :myname="'ffff'" age="19"></navbar>
</div>
</body>
<script>
  Vue.component('navbar', {
    template: `
    <div>
      <button @click="handleClick">返回</button>
      我是NavBar---{{age}}
      <button style="background: red">{{myname}}</button>
    </div>
  `,
    props: ['myname','age']
   })

  var vm = new Vue({
    el: '#box',
    data: {
      name: 'xxx',
     },
   })

</script>
</html>

屬性驗證

1 限制父傳子的變數型別
     props: {
      myname:String,
      isshow:Boolean
     }
2 父傳子時注意以下的區別
  <navbar myname="lqz" :isshow="isshow"></navbar>
  <navbar myname="lqz" :isshow="false"></navbar>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">
  <!--myname是自定義屬性-->
<!--   <navbar myname="lqz" isshow="false"></navbar>-->
  <navbar myname="lqz" :isshow="isshow"></navbar>
  <navbar myname="lqz" :isshow="false"></navbar>

</div>


</body>
<script>
  Vue.component('navbar', {
    template: `
    <div>
      <button>返回</button>
      我是NavBar---{{isshow}}
      <button style="background: red">{{myname}}</button>
    </div>
  `,
    props: {
      myname:String,
      isshow:Boolean
     }
   })

  var vm = new Vue({
    el: '#box',
    data: {
      name: 'xxx',
      isshow:true,
     },
   })

</script>
</html>

4 元件通訊之子父通訊

1 通過事件實現：
    點選一下子元件，就會觸發父元件某個函式的執行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">
<navbar @myevent="handleClick"></navbar>
</div>
</body>
<script>
  Vue.component('navbar', {
    template: `
    <div>
      <button @click="handleNav">點我，觸發父元件的某個函式執行</button>
    </div>
  `,
    data(){
      return {
        name:'lqz'
       }
     },
    methods:{
      handleNav(){
        console.log('我是nav的函式，我執行了')
        this.$emit('myevent',100,this.name,99)
       }
     }
   })
  var vm = new Vue({
    el: '#box',
    data: {
     },
    methods:{
      handleClick(ev,a,b){
        console.log('我是父元件的函式，我執行了')
        console.log(ev)
        console.log(a)
        console.log(b)
       }
     }


   })


</script>
</html>

小案例

子元件有一個按鈕，有一個輸入框，當輸入完內容，點選按鈕，資料在父元件中展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">
  <child @myevent="handle"></child>
  <hr>
   {{name}}
</div>

</body>
<script>
  Vue.component('child', {
    template: `
    <div>
    <input type="text" v-model="mytext">
    <button @click="handleClick">點我</button>
    </div>
  `,
    data() {
      return {
        mytext: ''
       }
     },
    methods: {
      handleClick() {
        this.$emit('myevent', this.mytext)
       }
     }
   })
  var vm = new Vue({
    el: '#box',
    data: {
      name: ''
     },
    methods: {
      handle(a) {
        this.name = a
       }
     }
   })
</script>
</html>

5 ref屬性（也可實現元件間通訊,子父，父子都可以使用）

ref放在標籤上，拿到的是原生節點
ref放在元件上，拿到的是元件物件,
    通過這種方式實現子傳父（this.$refs.mychild.text）
    通過這種方式實現父傳子（呼叫子元件方法傳引數）

使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">
  <input type="text" ref="myref">

  <child ref="mychild"></child>
  <hr>
  <button @click="handleButton">點我</button>
</div>

</body>
<script>
  Vue.component('child', {
    template: `
    <div>
    <input type="text" v-model="mytext">
    <hr>
    我是子元件的input
    </div>
  `,
    data() {
      return {
        mytext: ''
       }
     },
    methods:{
      add(a){
        console.log('我是子元件的add方法')
        console.log(a)
        return '返回了'
       }
     }
   })

  var vm = new Vue({
    el: '#box',
    data: {
      name: 'asdf'
     },
    methods: {
      handle(a) {
        this.name = a
       },
      handleButton(){
        console.log(this.$refs.mychild.mytext)
        console.log(this.$refs.mychild.add(this.name))
       }
     }


   })


</script>
</html>

6 事件匯流排

 不同層級的不通元件通訊

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">

  <child1></child1>
  <hr>
  <child2></child2>

</div>

</body>
<script>

  //定義一個事件匯流排
  var bus=new Vue()


  //元件1
  Vue.component('child1', {
    template: `
    <div>
    <input type="text" v-model="text">
    <button @click="handleClick">點我傳遞資料到另一個元件</button>
    </div>
  `,
    data() {
      return {
        text: ''
       }
     },
    methods: {
      handleClick() {
        console.log(this.text)
        bus.$emit('suibian',this.text) //通過事件匯流排傳送
       }
     }
   })
  //元件2
  Vue.component('child2', {
    template: `
    <div>
    收到的訊息是：{{recv_text}}
    </div>
  `,
    data(){
      return {
        recv_text:''
       }
     },
    mounted(){//元件掛載（生命週期鉤子函式中的一個），開始監聽事件總線上的隨便
      bus.$on('suibian',(item)=>{
        console.log('收到了',item)
        this.recv_text=item
       })

     },
   })

  var vm = new Vue({
    el: '#box',
    data: {},

   })


</script>
</html>

7 動態元件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">

  <ul>
    <li @click="who='child1'">首頁</li>
    <li @click="who='child2'">商品</li>
    <li @click="who='child3'">訂單</li>
  </ul>
  <!--<component :is="who"></component>-->
  <keep-alive>
    <component :is="who"></component>
  </keep-alive>
</div>

</body>
<script>

  var vm = new Vue({
    el: '#box',
    data: {
      who: 'child1'
     },
    components: {
      child1: {
        template: `
        <div>我是首頁 
        <input type="text">
        </div>
        `,
       },
      child2: {
        template: `
        <div>我是商品 </div>
        `,
       },
      child3: {
        template: `
        <div>我是訂單 </div>
        `,
       }
     }
   })
</script>
</html>

8 slot插槽

8.1 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">
  <child1>
    <ul>
      <li v-for="i in 4">{{i}}</li>
    </ul>
  </child1>
  <hr>
  <child2></child2>
  <hr>
  <child3></child3>
</div>

</body>
<script>

  var vm = new Vue({
    el: '#box',
    data: {
      who: 'child1'
     },
    components: {
      child1: {
        template: `

        <div>


        <slot></slot>
        <hr>
        我是首頁

        <input type="text">

        </div>
        `,

       },
      child2: {
        template: `
        <div>我是商品 </div>
        `,

       },
      child3: {
        template: `
        <div>我是訂單 </div>
        `,

       }
     }

   })


</script>
</html>

8.2 插槽案例（一個元件通過插槽控制另一個元件的顯示隱藏）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">
  <child1>
    <button @click="isShow=!isShow">點我隱藏child2</button>
  </child1>
  <hr>
  <child2 v-if="isShow"></child2>
</div>

</body>
<script>

  var vm = new Vue({
    el: '#box',
    data: {
      isShow: true,
     },
    components: {
      child1: {
        template: `

        <div>
        <slot></slot>
        </div>
        `,

       },
      child2: {
        template: `
        <div>
         <ul>
         <li v-for="i in 4">{{i}}</li>
        </ul>
         </div>
        `,

       },
   }

   })


</script>
</html>

8.3 具名插槽（指定標籤放到元件的某個插槽中）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">
  <child1>
    <button @click="isShow=!isShow" slot="button1">點我隱藏child2</button>

    <div slot="div1">我是div</div>
  </child1>
  <hr>
  <child2 v-if="isShow"></child2>
</div>

</body>
<script>

  var vm = new Vue({
    el: '#box',
    data: {
      isShow: true,
     },
    components: {
      child1: {
        template: `

        <div>
        <slot name="button1"></slot>
        <hr>
        我是華麗的分割線
        <hr>
        <slot name="div1"></slot>
        </div>
        `,

       },
      child2: {
        template: `
        <div>
         <ul>
         <li v-for="i in 4">{{i}}</li>
        </ul>
         </div>
        `,

       },
   }

   })


</script>
</html>

vue框架之元件通訊及插槽簡介等相關內容-113

1 定義區域性元件 2 元件編寫方式與Vue例項的區別 1 自定義元件需要有一個root element，一般包裹在一個div中,跟vue例項一樣2 父子元件的data是無法共享3 元件可以有data，methods,computed....,但是data 必須是一個

總結Vue第二天：自定義子元件、父子元件通訊、插槽

總結Vue第二天：自定義子元件、父子元件通訊、插槽一、元件：元件目錄 1、註冊元件（全域性元件、區域性元件和小demo）

vue框架前後端分離專案之框架介紹及前後端配置等相關內容-116

1 軟體開發規範2 pip換源1、檔案管理器檔案路徑位址列敲：%APPDATA% 回車，快速進入 C:\\Users\\電腦使用者\\AppData\\Roaming 資料夾中2、新建 pip 資料夾並在資料夾中新建 pip.ini 配置檔案3、新增 pip.ini 配置檔

vue框架前後端分離專案之跨域問題及首頁搭建等相關內容-117

1 跨域問題 1 同源策略：瀏覽器的安全策略，不允許去另一個域載入資料2 域：ip或者埠都必須一致3 前後端分離專案會出現跨域4 不使用第三方，自己處理5 CORS：後端技術，跨域資源共享，服務端只要做配置，（本身瀏覽器

vue入門 vue基礎之簡單使用6--插槽 slot

技術標籤：前端 Vue 插槽：子元件中提供給父元件使用的一個佔位符，父元件不僅可以往插槽中插入值型別，也可以插入任何模板程式碼我們插入的程式碼，會自動替代子標籤 (白話，就是給你一個坑，父元件傳一個東

vue框架前後端分離專案之課程介面、頁面、前臺等相關內容-127

1 課程介面 1 課程表設計（關聯關係是欄位和欄位的關係，而不是表和表的關係）-課程分類表：跟課程一對多(一個課程分類下很多課程)-實戰課表（一個課程有很多章節）-課程章節表（一個章節，有很多課時）-課時表-老師

django之jwt多方式登陸及增刪改查等相關內容-90

1 基於jwt的多方式登陸 1 手機號+密碼使用者名稱+密碼郵箱+密碼2 流程分析（post請求）：-路由：自動生成-檢視類：ViewSet（ViewSetMixin, views.APIView）-序列化類：重寫validate方法，在這裡面對使用者名稱和密

併發程式設計之生產者消費者模型以及執行緒等相關內容-38

1.生產者消費者模型 # 初級生產者消費者模型# import time# import random# from multiprocessing import Process, Queue### def producer(name, food, q):#for i in range(10):#data = \'%s 製造了%s\' % (name, fo

併發程式設計之執行緒池以及協程等相關內容-40

1.執行緒池shutdown # 類似於是執行緒中的join功能from concurrent.futures import ThreadPoolExecutorimport timepool = ThreadPoolExecutor(3)def task(name):print(\'%s 開始\' % name)time.sleep(1)print(

vue框架之swiper、自定義指令、過濾器及單檔案元件等相關內容-114

1 生命週期 1 mounted用的最多：向後端傳送請求，定時器初始化2 destroyed：元件銷燬--->給元件寫一個定時器-->元件銷燬，定時器清除

Vue中的元件通訊、ref、jquery、is屬性、slot插槽

元件通訊 1、父子元件:傳遞基本資料型別，通過繫結自定義屬性，子元件通過props接收

vue 插槽簡介及使用示例

Vue的插槽，是一種內容分發機制，但是我感覺它更加像元件的一種佔位符的概念，通過插槽，等待元件外部傳入複雜的內容。

django框架之分頁器及forms元件等相關內容-72

1 分頁器元件介紹 1 專案資料量大了以後，比如涉及到分頁，一頁一頁的載入顯示2 django中分頁器元件，把分頁常用的東西，封裝到一個類中3 例項化得到一個物件，物件裡有屬性和方法

vue框架前後端分離專案之git分支合併及首頁登陸註冊介面等相關內容-120

1 版本管理工具2 git init# 當前目錄被管理起來3 git log# 檢視版本管理日誌4 git status # 綠色，紅色5 git add 檔名 # 把檔案提交到暫存區6 git commit -m \'註釋\' # 把暫存區內容提交到版本庫7 git reset --hard

vue框架前後端分離專案之登入註冊頁面及多方式登入、手機號驗證碼介面等相關內容-121

1 登入註冊前端頁面 1.1 Login.vue <template><div class=\"login\"><div class=\"box\"><i class=\"el-icon-close\" @click=\"close_login\"></i><div class=\"content\"><

vue框架前後端分離專案之課程頁面前端、課程表分析、編寫及資料錄入等相關內容-126

1 課程頁面前端 <script>import Header from \"@/components/Header\"// import Footer from \"@/components/Footer\"export default {name: \"Course\",data() {return {category: 0,}},components: {Heade

Vue元件開發 - 匿名插槽&具名插槽

技術標籤：html 匿名插槽: 是父傳子的一種選擇方式 1.在父元件中定義自定義名，寫入相關內容。 2.再在相關子元件中新增</slot> 標籤即可。

<vue 元件 4、插槽的使用>

程式碼結構一、 01-slot-插槽的基本使用 1、效果同樣的一個插槽，父元件呼叫的時候不同展現的內容就不同

Vue學習之元件用法例項詳解

本文例項講述了Vue學習之元件用法。分享給大家供大家參考，具體如下： Vue中的模組化、可重用程式碼塊將頁面細分為一個個功能元件，而且元件之間可以巢狀。元件分為全域性元件與區域性元件，區域性元件在例項中進行註

【vue】父子元件通訊遇到的錯誤資訊

大意：父元件控制子元件Dialog 對話方塊的顯隱錯誤demo: 父元件： <template> <div class=\"app-container \">

vue框架之元件通訊及插槽簡介等相關內容-113

1 定義區域性元件

2 元件編寫方式與Vue例項的區別

3 元件通訊之父傳子通訊

屬性驗證

4 元件通訊之子父通訊

小案例

5 ref屬性（也可實現元件間通訊,子父，父子都可以使用）

使用

6 事件匯流排

7 動態元件

8 slot插槽

8.1 基本使用

8.2 插槽案例（一個元件通過插槽控制另一個元件的顯示隱藏）

8.3 具名插槽（指定標籤放到元件的某個插槽中）

相關推薦