動態編譯vue組件
Ⅰ 如何利用vue組件 動態生成router-link
首先，Vue.component的第二個參數是一個配置對象，你這個寫法連JS語法都不符合。
其次，template配置應該是一個HTML代碼的字元串，所以改成：
Vue.component('sidebar', {
template: '<div><router-link to="/">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></div>'
});
Update
（參考資料：https://router.vuejs.org/en/e...）
針對你說的都是引入的情況，代碼做如下修改：先按如下順序依次引入Vue和Vue-router
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
然後加入如下JS
// 在Vue裡面注冊VueRouter，這樣可以在Vue裡面使用`<router-link>`
Vue.use(VueRouter);
// 下面這一段是路由設置和應用根元素綁定，具體可以參照官方文檔
// -----------------------------------
var routes = [ ... ]; // 這個是路由的配置，你自己寫
// 定義路由VueRouter控制項，其中，`{routes}`是`{routes: routes}`的簡寫，可能是ES6裡面的新語法
var router = new VueRouter({routes});
// 創建Vue對象
var app = new Vue({
el: '#app', // 假設綁定的根元素為#app
router, // 此處也是簡寫
});
然後可以使用Vue.component()語句了，此時，因為注冊了Vue-Router組件，<router-link>可以被識別。
Ⅱ 怎樣利用Vue動態生成form表單
$formCreate 參數
rules表單生成規則 [inputRule,selectRule,...]
options初始化配置參數 (詳細見底部 createOptions)
hidden生成隱藏欄位
1- $formCreate.maker.hidden(field,value)
input生成input輸入框
1- $formCreate.maker.input(title,field,value)
radio生成單選框
checkbox生成復選框
select生成select選擇器
switch生成switch開關
datepicker生成日期選擇器組件,別名date
timepicker生成時間選擇器組件,別名time
inputnumber生成數字輸入框,別名number
colorpicker生成顏色選擇器組件,別名color
cascader生成多級聯動組件
upload生成上傳組件
rate生成評分組件
slider生成滑塊組件
formData()獲取表單的value
getValue(field)獲取指定欄位的value
changeField(field,value)修改指定欄位的value
resetFields()重置表單
destroy()銷毀表單
removeField(field)刪除指定欄位
fields()獲得表單所有欄位名稱
submit()表單驗證通過後提交表單,觸發onSubmit事件
validate(successFn,errorFn)表單驗證,如果驗證通過執行successFn,未通過則執行errorFn
validateField(field,callback)表單驗證指定欄位
$formCreate.maker 組件規則生成器
除hidden外,其他配置方式全部相同.詳細參考表單元素規則
props,event,slot傳入參數為對象,例({key:value,...})
validate,options參入參數為數組,例([options,options,..])
$f 實例方法
Ⅲ vue怎麼動態注冊組件呢
採用component 其中is屬性則是動態組件的賦值處，其變數類型為字元串。字元串裡面則是動態組件
Ⅳ vue如何動態調用方法
通常我們會在組件里的 template 屬性定義模板，或者是在 *.vue 文件里的 template 標簽里寫模板。但是有時候會需要動態生成模板的需求，例如讓用戶自定義組件模板，或者設置組件的布局。
例如要做一個類 select 的組件，用戶傳入 options 數據，通過 value prop 獲取選中值，最基本的原型如下。
Vue.component('XSelect', {
template: `
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
<span v-text="option.label"></span>
</div>
</div>`,
props: ['value','options']
})
如果此時需要增加一個 API 支持讓用戶自定義 option 部分的模板。此處用 slot 並不能解決問題。
通過 $options.template 修改
通過列印組件對象可以獲得一個信息，在 $options 里定義了一個 template 屬性，寫在 template 標簽里的模板，最終編譯後也會在 $options.template 里。通過文檔的生命周期 可以得知，在 created 的時候， 實例已經結束解析選項， 但是還沒有開始 DOM 編譯 也就是說，如果用戶通過 prop 的數據我們可以獲得，但是模板其實還沒有渲染成 DOM。經過測試，在 created 修改 this.$options.template 是可以改變最終生成的 DOM 的，同時也能拿到 props 的內容。
那麼我們可以修改下代碼，使其支持自定義模板
Vue.component('XSelect', {
props: [
'value',
'options',
{
name: 'template',
default:'<span v-text="option.label"></span>'
}
],
created() {
varoptionTpl =this.template
this.$options.template =`
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
${optionTpl}
</div>
</div>`
}
})
用戶使用是就可以傳入模板了
<x-select
:value.sync="value"
template="<span>標簽: {{ option.label }}, 值: {{ option.value }}</span>"
:options="[
{value: 1, label: 'a'},
{value: 2, label: 'b'},
{value: 3, label: 'c'}
]">
</x-select>
可能存在的問題
我們知道 Vue 在內部幫我們做了許多優化，但是在這里可能會由於某些優化導致動態拼接的模板無法渲染成功。例如這里我們不使用 v-for 而是手工遍歷 options 生成需要的 HTML
consttpl = options.map(opt =>`<div>${this.optionTpl}</div>`)
this.$options.template =`
<div class="select">
<input :value="value" readonly>
${tpl}
</div>`
這里會導致一個 BUG，如果一個頁面有多個 x-select 組件，並且 options 長度不一樣，會導致長的 options 的組件後面幾個選項渲染不出來。究其原因是 Vue 會幫我們緩存模板編譯結果。翻看代碼可以找到 vue/src/instance/internal/lifecycle.js 里有做優化，同時提供的 _linkerCachable 本意是給 內聯模板 使用。我們可以通過設置 this.$options._linkerCachable = false 達到我們的目的。
這樣我們就可以開發讓用戶自定義布局的組件了，用戶傳入布局參數，通過手工拼接模板，設置了 _linkerCachable = false 也不會被緩存。
通過 $options.partials 動態添加 partial
使用 partials 也能達到添加自定義模板的目的，但是通常的做法是要全局注冊 partial，這么做並不優雅。 vue-strap 就是這么做的。如果重名了會被覆蓋（初次渲染不會，但是數據更新重新渲染 DOM 時就會被覆蓋）。
通過文檔我們知道可以在組件內部通過 partials 屬性注冊局部的 partial，因此自然而然也可以在 this.$options.partials 去動態添加了。
Ⅳ weex最新版如何將.vue編譯成.js文件
1.在components 目錄下新建一個validate.js：
export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan";
}
}
這就是我們的插件，定義了一個屬性
2.入口文件jssrc/index.js 加入：
// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);
3.我們到user-username.vue 組件下驗證一下:
mounted(){
alert(this.$myName);
},
瀏覽器訪問登錄頁面，成功彈出：
這里寫圖片描述
4.剛剛我們已經學會插件里定義屬性，馬上來學一下如何定義方法：
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
}
}
同樣可以使用該方法：
if(this.checkUserName("hello")){
alert("ok");
}else{
alert("error");
}
5.
這里寫圖片描述
我們修改user-name.vue 組件，來實現文本框驗證：
<template>
<div class="form-group">
<label class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-10">
<input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
<label class="label label-danger" v-if="showErrorLabel">用戶不合法</label>
</div>
</div>
</template>
<script>
export default{
props:["placeholder"],
data:function () {
return {
username:"",
showErrorLabel:false,
}
},
methods:{
userNameChange(){
// 用戶名改變的方法里判斷 用戶名是否復合要求
if(this.checkUserName(this.username)){
this.showErrorLabel = false; // 如果驗證沒有通過就顯示錯誤提示
}else{
this.showErrorLabel = true;
}
// 調用父組件的方法
this.$emit("childChange","username",this.username)
}
}
}
</script>
這里寫圖片描述
自定義指令
文檔：
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 如果沒有填寫,默認為true
}
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
Vue.directive("uname",{
bind(){
console.log("bind"); // 只會調用一次
},
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
},
})
}
}
2、我們自定了一個uname 指令，下面來看一下如何使用的？
<input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
我們在組件的模板里使用了 v-uname ，並且給綁定了」username」數據。
我們打開瀏覽器的控制台：
這里寫圖片描述
說明我們定義的指令里，這個方法執行了：
bind(){
console.log("bind"); // 只會調用一次
},
3、下面我們來看一下update 里的東東
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}
Ⅵ vue裡面可以動態載入touchspin插件嗎
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴展。
下面一段簡單的代碼給大家介紹Vue載入組件的幾種方式，具體代碼如下所示：
//正常載入
importindexfrom'../pages/index.vue'
importviewfrom'../pages/view.vue'
//懶載入
constindex=resolve=>require(['../pages/index.vue'],resolve)
constview=resolve=>require(['../pages/view.vue'],resolve)
//懶載入-按組
constindex=r=>require.ensure([],()=>r(require('../pages/index.vue')),'group-index')
constview=r=>require.ensure([],()=>r(require('../pages/view.vue')),'group-view')
//懶載入-按組import，基於ES6import的特性
constindex=()=>import('../pages/index.vue')
constview=()=>import('../pages/view.vue')
補充：Vue動態載入組件的四種方式
動態載入組件的四種方式：
1、使用import導入組件，可以獲取到組件
varname='system';
varmyComponent=()=>import('../components/'+name+'.vue');
varroute={//前端全棧開發交流學習圈：866109386
name:name,//幫助1-3年前端人員，提神技術思維
component:myComponent
}
2、使用import導入組件，直接將組件賦值給componet
varname='system';
varroute={//前端全棧開發交流學習圈：866109386
name:name,//幫助1-3年前端人員，提神技術思維
component:()=>import('../components/'+name+'.vue');
}
3、使用require 導入組件，可以獲取到組件
varname='system';
varmyComponent=resolve=>require.ensure([],()=>resolve(require('../components/'+name+'.vue')));
varroute={//前端全棧開發交流學習圈：866109386
name:name,//幫助1-3年前端人員，提神技術思維
component:myComponent
}
Ⅶ vue中，父組件可以向子組件傳遞一個組件嗎
可以的，首先，父組件傳入一個`render`函數，用於描述要動態生成的子組件。相關代碼如下：
const columns = [{
title: '操作',
key: 'operation',
render: (text, record, index) => `<s-button icon="search" @click="view(${index})"></s-button>`
}]
然後，對應的`table`組件中，對相應的`render`使用`$compile`進行渲染，並插入到相應的位置。這里需要注意的是編譯作用域，需要使用父組件來編譯，否則無法綁定父組件的事件。相關代碼如下：
if (render) {
const $td = $tr.children[j]
const value = this.dataSource[i]
const template = render(value[dataIndex], value, i)
const $cell = document.createElement('div')
$cell.innerHTML = template
this.$parent.$compile($cell)
$td.appendChild($cell)
}
Ⅷ 如何利用vue組件 動態生成router
先是入口點 main.js import App from './components/App.vue' router.start(App, '#app') 然後在App.vue 也就是根組件裡面聲明router-view
Ⅸ vue 動態組件之間 通信 怎麼實現
一個問題被關閉了，看來你已經研究到匯流排通信這一部分了，目前的問題是
var eventBus = new Vue();
不能被其他組件所使用。
我猜測你可能是使用了官方的cli 生成的 Webpack的單文件組件模式吧。
給你一個簡單的辦法，在 main.js 裡面