新手上路,根據vue官方手冊記錄學習內容,主要知識點如下.原始碼:
id="model">
我是model元件的內容p>
div>
template>
我是段落一p>
我是段落二p>
div>
body>
var model =
var vm = new vue(
})script>
渲染結果:
我是model元件的內容p>
div>
div>
原始碼:
id="model">
我是model元件的內容p>
name="paragrahy1">
slot>
name="paragrahy2">
slot>
slot> //預設插槽,用於接受所有不匹配內容的插槽位置.
div>
template>
slot="paragrahy1">我是段落一p>
slot="paragrahy2">我是段落二p>
我是段落**>
model>
div>
body>
渲染結果:
我是model元件的內容p>
我是段落一p>
我是段落二p>
我是段落**>
div>
id="model">
我是插槽預設內容slot>
div>
template>
model>
div>
body>
渲染結果:
我是插槽預設內容div>
div>
插槽都是向下分發內容, 作用域插槽實現了子元件向父元件傳遞資料((2.5.+在父元件無論什麼標籤都能接受slot-scope,不僅侷限在template標籤上).
id="model">
v-bind:arr="list">
slot>
div>
template>
slot-scope="slotname">
}p>
model>
div>
body>
var model = }}
var vm = new vue(
})script>
渲染結果:
lalalap>
div>
div>
編譯作用域:父元件模板的內容只在父元件作用域內編譯.子元件模板的內容只在子元件作用域內編譯.
eg:
id="model">
slot>
div>
template>
}p>
model>
div>
body>
var model =
var vm = new vue(
},components:
})script>
渲染結果:
男p>
div>
div>
Vue Slot（插槽 2019 03更新
一般而言，我們元件的結構都是預先寫好的。但是我們開發過程中經常會碰到這麼乙個情況，引用子元件以後，我還想要在父元件使用子元件的時候，靈活地改變子元件裡面的內容。譬如，子元件裡面原本定義了乙個ul，然後使用v for的方式遍歷li裡面的span內容。此時，如果我們在子元件的li裡面如果是乙個slot，...
vue slot插槽的使用
vue官方文件在slot這部分講解的並不是很詳細，這裡用更通俗的語言進行描述。根據官檔的標題來開始吧 假如父元件的 如下 children為註冊的子元件 這裡是插槽的內容，位於子元件內部 渲染結果 這裡是子元件，注意 沒有加入slot標籤哦！上面的 實際效果如下 這裡是父元件 這裡是子元件，注意 沒...
Vue slot 插槽的使用
slot插槽作為分發內容的出口 假設看這篇文章的你已經有了一定的vue元件基礎 let btn vue.component btn template 1 上述 建立了乙個名為btn的全域性元件。接下來我們在其他頁面中呼叫這個外掛程式 let vm new vue template 得到的頁面效果如下...