快捷導(dǎo)航

vue組件講解(is屬性的用法)模板標(biāo)簽替換操作

更新時(shí)間：2020年09月04日 17:11:50 作者：海盜強(qiáng)

這篇文章主要介紹了vue組件講解(is屬性的用法)模板標(biāo)簽替換操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧

vue中is的屬性引入是為了解決dom結(jié)構(gòu)中對(duì)放入html的元素有限制的問題，譬如ul里面要接上li的標(biāo)簽，引入is的屬性后，你完全可以寫成這樣

<div class="language-html">
  <ul> 
    <li is="row"></li> 
  </ul>
</div>

這樣會(huì)保證dom結(jié)構(gòu)在瀏覽器的正常渲染，盡量避免在不正確的結(jié)構(gòu)中直接使用組件

<script>
  Vue.component('row', {
    template: '<li>this is a row</li>'
  })
</script>

或另一種用法如圖：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>動(dòng)態(tài)組件與v-once指令</title>
 <script src="./vue.js"></script>
</head>
<body>
 <div id="app">
 <component :is="type"></component>
 <!-- <child-one v-if="type==='child-one'"></child-one>
 <child-two v-if="type==='child-two'"></child-two> -->
 <button @click="handleBtnClick">change</button>
 </div>
 <script>
 Vue.component("childOne", {
  template: "<div>child one</div>"
 });
 Vue.component("childTwo", {
  template: "<div>child two</div>"
 });
 var vm = new Vue({
  el:"#app",
  data: {
  type: "child-one"
  },
  methods: {
  handleBtnClick: function(){
   this.type = (this.type==="child-one" ? "child-two" : "child-one")
  }
  }
 })
 </script>
</body>
</html>

補(bǔ)充知識(shí)：vue如何從外部修改組件內(nèi)部的變量的值

1、首先是如何給你定義的變量拿到數(shù)據(jù)：

這里我自己用的是vuex：

首先在你項(xiàng)目的src文件夾下創(chuàng)建這么一個(gè)目錄：

之后就要在index.js中將homedatas.js（拿數(shù)據(jù)的js）共享出去，使頁(yè)面能拿到數(shù)據(jù)，

以下是index.js的代碼：

隨后就是在homedatas中獲取數(shù)據(jù)了，以下是homedatas.js代碼：

以上就是獲取數(shù)據(jù)的步驟，之后就是在頁(yè)面中拿到這個(gè)獲取到的數(shù)據(jù)：

首當(dāng)其沖不可少的就是引用，引用vuex和引用組件：

之后在頁(yè)面的jascript中的export default中定義組件，獲取數(shù)據(jù)：

用這個(gè)方式在頁(yè)面中引用組件，然后再自定義標(biāo)簽中將數(shù)據(jù)傳遞給組件：

2、子組件中獲取父組件傳遞過來(lái)的數(shù)據(jù)：

props中定義屬性，這是之前在頁(yè)面自定義標(biāo)簽中設(shè)置的三個(gè)屬性，分別控制組件中的不同部分，定義每個(gè)屬性的類型、默認(rèn)值以及測(cè)試函數(shù)，注意，測(cè)試函數(shù)一定要return一個(gè)值，不然頁(yè)面會(huì)報(bào)錯(cuò)，測(cè)試函數(shù)的參數(shù)就是傳遞過來(lái)的值：

scrolldatas是一個(gè)數(shù)組，之后便是循環(huán)遍歷這個(gè)數(shù)組中的元素，數(shù)組中的值就能展示在頁(yè)面了，頁(yè)面元素會(huì)隨著數(shù)組元素的改變而改變：

之后就是其他兩個(gè)變量怎么在組建中引用了：

首先我要在測(cè)試函數(shù)中判斷一下，這個(gè)傳進(jìn)來(lái)的值符合不符合要求，如果不符合，那就不執(zhí)行測(cè)試函數(shù)，就是默認(rèn)值，如果符合要求，執(zhí)行函數(shù)，并在函數(shù)中改變默認(rèn)值，賦值給相應(yīng)自定義變量：

之后就是調(diào)用函數(shù)，調(diào)用函數(shù)中傳入?yún)?shù)，這個(gè)參數(shù)現(xiàn)在的值不是最開始var的初始值，而是后來(lái)測(cè)試函數(shù)中因?yàn)榉蠝y(cè)試函數(shù)的條件后來(lái)賦給的值（因?yàn)閣indow.onload直到頁(yè)面加載才會(huì)執(zhí)行）：