vueサブページが親ページを呼び出す方法

4603 ワード




export default</span> <span class="token punctuation">{</span>
  <span class="token selector">name: 'App',
  provide()</span><span class="token punctuation">{</span>
      <span class="token selector">return</span><span class="token punctuation">{</span>
          <span class="token property">say</span><span class="token punctuation">:</span>this.say
      <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token selector">,
  methods:</span><span class="token punctuation">{</span>
      <span class="token selector">say()</span><span class="token punctuation">{</span>
          <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"        "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>




サブレベル


    export default</span> <span class="token punctuation">{</span>
        <span class="token selector">inject:['say'],
        methods:</span><span class="token punctuation">{</span>
         <span class="token selector">recv()</span><span class="token punctuation">{</span>
             this.<span class="token function">say</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
         <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    


第2の方法は、サブコンポーネント内でthis.$を直接通過する.parent.event親コンポーネントを呼び出すメソッド親


  import child from <span class="token string">'~/components/dam/child'</span><span class="token selector">;
  export default</span> <span class="token punctuation">{</span>
    <span class="token selector">components:</span> <span class="token punctuation">{</span>
      child
    <span class="token punctuation">}</span><span class="token selector">,
    methods:</span> <span class="token punctuation">{</span>
      <span class="token selector">fatherMethod()</span> <span class="token punctuation">{</span>
        console.<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'  '</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>


サブレベル


  export default</span> <span class="token punctuation">{</span>
    <span class="token selector">methods:</span> <span class="token punctuation">{</span>
      <span class="token selector">childMethod()</span> <span class="token punctuation">{</span>
        this.$parent.<span class="token function">fatherMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>