动态编译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 里面