vue组件之间的传值

组件传参： 组件实例的作用域是孤立的。这意味着不能在子组件的模块中直接引用父组件的数据，必须使用特定的方法才能实现组件之间的数据传递。 如在父组件中向子组件传值：

<pre class="prettyprint"><code class=" hljs fix"><span class="hljs-attribute"><headerBar message =<span class="hljs-string"> “hello” />

在子组件中需要使用props获取到父组件的传值：

<pre class="prettyprint"><code class=" hljs http"><span class="hljs-attribute">props: <span class="hljs-string">[‘message’]

子组件向父组件传递数据，如当input发生变化时，向子组件传name值：

<pre class="prettyprint"><code class=" hljs javascript"><input v-model = “name” @change = “setName” />
methods: {
setName: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(){
<span class="hljs-keyword">this.$emit(‘transferName’,<span class="hljs-keyword">this.name)
}
}

在父组件中获取数据：

<pre class="prettyprint"><code class=" hljs javascript"><headerBar @transferName = “getName”/>
methods: {
getName: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(msg){
<span class="hljs-keyword">this.user = msg
}
}

子子组件传递数据 子组件之间不能相互传值，那么必须依靠父组件来进行值的传递，即子组件的值传递到父组件，再由父组件传递到另一个子组件。 如我们定义一个data，让它从子组件向父组件传递：

<pre class="prettyprint"><code class=" hljs cs"><span class="hljs-keyword">let data = {
iss: <span class="hljs-keyword">this.iss
con: <span class="hljs-keyword">this.textContent
url: <span class="hljs-keyword">this.upImgUrl
}
<span class="hljs-keyword">this.$emit(<span class="hljs-string">'listen',data)

在父组件中接收数据：(注意标签issue是写在父组件中的一个子组件)

<pre class="prettyprint"><code class=" hljs livecodeserver"><issue v-show=<span class="hljs-string">"index == 0" v-<span class="hljs-command"><span class="hljs-keyword">on:<span class="hljs-title">listen=<span class="hljs-string">"listenMsg"/>

因为子组件中发送了一个listen事件，则在使用子组件时需要借用这个listen事件：

<pre class="prettyprint"><code class=" hljs haskell"><span class="hljs-title">listenMsg(<span class="hljs-typedef"><span class="hljs-keyword">data)<span class="hljs-container">{
<span class="hljs-title">this.<span class="hljs-title">postData = <span class="hljs-title">data;
}

在父组件中定义postData获取到数据。 从父组件向另一个子组件传递值：

<pre class="prettyprint"><code class=" hljs ruby"><circlepage v-show=<span class="hljs-string">"index == 1" <span class="hljs-symbol">:data=<span class="hljs-string">"postData"/>

在circle中获取值，但是如果直接在mounter中获取值，则只能获取到原始值，并不能监测到另一个子组件传递过来的值，所以我们需要在watch中来获取数值：

<pre class="prettyprint"><code class=" hljs haskell"><span class="hljs-title">props: [‘<span class="hljs-typedef"><span class="hljs-keyword">data’],
watch: {
<span class="hljs-typedef"><span class="hljs-keyword">data<span class="hljs-container">(<span class="hljs-title">newVal)<span class="hljs-container">{
<span class="hljs-title">this.<span class="hljs-title">circleList.<span class="hljs-title">unshift(<span class="hljs-title">newVal);
}
}

这样，我们完成了子组件与父组件，父组件与子组件的传值。

作者：rookie.he（kuke_kuke） 博客链接： 欢迎关注支持，谢谢！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!