① vue.js methods中的方法互相調用時變數的作用域是怎樣的
methods中的function中的this指向vue實例，其他的沒什麼
這種調用方式是直接訪問test2函數，沒有任何的this綁定，所以肯定訪問不到
this.$options.methods.test2();
而直接調用this.test2()，內部肯定做了this綁定的，例如
this.$options.methods.test2.bind(this)();
更新：Vue源碼中的處理
/**
* Setup instance methods. Methods must be bound to the
* instance since they might be passed down as a prop to
* child components.
*/
Vue.prototype._initMethods = function () {
var methods = this.$options.methods
if (methods) {
for (var key in methods) {
this[key] = bind(methods[key], this)
}
}
}
function bind (fn, ctx) {
return function (a) {
var l = arguments.length
return l
? l > 1
? fn.apply(ctx, arguments)
: fn.call(ctx, a)
: fn.call(ctx)
}
}
② vuejs methods中的方法互相調用時變數的作用域是
methods中的function中的this指向vue實例，其他的沒什麼這種調用方式是直接訪問test2函數，沒有任何的this綁定，所以肯定訪問不到 this$optionsmethodstest2(); 而直接調用thistest2()，內部肯定做了this綁定的，例如 this$optionsmethodsvuejs methods中的方法互相調用時變數的作用域是
③ 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 去動態添加了。
④ vue中一個頁面多個掛載怎麼讓掛載中的數據相互調用
可以通過實例訪問。
如var vm = new Vue(...)，vm._data即是data:{...}內的值，可以相互訪問。
⑤ vue 怎麼調用其他組件的方法
vue組件的數據傳遞應該是單向，永遠是向下的，把父組件屬性方法傳遞到子組件。
如果子組件要改變不同的顏色，是應該接受父組件傳遞進來的props，自己調用自己的方法，把props當個參數來判斷來顯示什麼顏色，而不是讓父元素調子組件的方法。
還有一種是vuex，組件本身跟store的某個值綁定，外部組件修改store的值，來影響該組件的顏色。
⑥ vue2父組件怎麼調用子組件的方法
用this.$broadcast 和this.$dispatch 可以達到父子之間相互調用函數的功能
不過根據最新的vue版本 這兩種方法好像廢除了
印象中好像改為
var bus = new Vue()
bus.$on bus.$off bus.$emit
⑦ vue單文件組件通常是如何調用實例方法的
Vue父組件向子組件傳遞事件/調用事件
不是傳遞數據（props）哦，適用於 Vue 2.0
方法一：子組件監聽父組件發送的方法
方法二：父組件調用子組件方法
子組件：
export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('監聽成功') }) }) }， methods { callMethod () { console.log('調用成功') } } }
父組件：
<child ref="child" @click="click"></child> export default { methods: { click () { this.$refs.child.$emit('childMethod') // 方法1 this.$refs.child.callMethod() // 方法2 }, components: { child: child } }
以上這篇Vue父組件調用子組件事件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:VUEJS 2.0 子組件訪問/調用父組件的實例vue.js中父組件調用子組件的內部方法示例ES6下子組件調用父組件的方法(推薦)
⑧ vue.js中兩個component之間如何調用其中的方法
react是單向數據流的。但是為了特殊需要，提供了mixin去做雙向通信，這違反了react的本質，一般不推薦用，官網也對此做出了警告。
兩個毫無關系的組件A B，通信是可以的。
A點一個button去設置B里的datastoreB，B里getInitial或者renderDidMount里監聽它的datastroeB，如果datastroeB有變化，就產生響應的行為。
我目前用的是microEvent.js去設置datastoreB的對象上的監聽。
⑨ vue.js methods中的方法互相調用時變數的vue 作用域是怎樣的
methods中的function中的this指向vue實例，其他的沒什麼這種調用方式是直接訪問test2函數，沒有任何的this綁定，所以肯定訪問不到
this.$options.methods.test2();
而直接調用this.test2()，內部肯定做了this綁定的，例如
this.$options.methods.test2.bind(this)();
更新：Vue源碼中的處理
/**
* Setup instance methods. Methods must be bound to the
* instance since they might be passed down as a prop to
* child components.
*/
Vue.prototype._initMethods = function () {
var methods = this.$options.methods
if (methods) {
for (var key in methods) {
this[key] = bind(methods[key], this)
}
}
}
function bind (fn, ctx) {
return function (a) {
var l = arguments.length
return l
? l > 1
? fn.apply(ctx, arguments)
: fn.call(ctx, a)
: fn.call(ctx)
}
}
⑩ vue 組件之間的方法怎麼互相調用
用this.$broadcast this.$dispatch 達父間相互調用函數功能
根據新vue版本 兩種像廢除
印象像改
var bus = new Vue()
bus.$on bus.$off bus.$emit