Question

我有一个组件，我传入一个id作为道具：

<comments myId="1"></comments>

在评论部分我把它作为道具：

props: [
    'myId',
],

在这个评论组件模板中，我有另一个组件

<btn id="{{ this.myId }}"></btn>

但我似乎无法通过道具 - 我得到了错误：

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

我不知道为什么我需要使用:，我很高兴将id作为字符串传递。

如何解决错误，并传递道具？

Answer 1

你可以写下来

<btn :id="myId"></btn>

将道具传递给组件。

传递道具的语法是我们可以使用绑定将变量绑定到组件，我们不需要在那里插值。

Vue.component('child', {
  template: '#child', 
  props: ['id']
});

Vue.component('childchild', {
  template: '#childchild', 
  props: ['id']
});

new Vue({
  el: '#app',
  data: {
  },
  created: function() {
   
  },
  methods: {
     
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

<div id="app">  
  <child id="1000"></child>  
</div>

<template id="child">
  <childchild :id="id"></childchild>
</template>

<template id="childchild">
 <h1>{{ id }}</h1>
</template>

通过支撑2层儿童？

1 个答案: