uni-app中vue页面如何动态与组件绑定

在Vue中使用动态绑定可以实现在组件中动态修改数据，其中最常用的方法是使用v-bind指令。

示例：

假设我们有一个组件名为HelloWorld，它的模板如下：

<template>
  <div>
    <p>{{message}}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    changeMessage () {
      this.message = 'Hello Vue!'
    }
  }
}
</script>

在父组件中，我们可以使用v-bind指令将一个属性与子组件中的数据绑定起来。例如，我们可以将message属性与子组件中的message数据绑定，如下所示：

<template>
  <div>
    <hello-world :message="parentMessage"></hello-world>
    <button @click="changeParentMessage">Change Parent Message</button>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      parentMessage: 'Hello Parent!'
    }
  },
  methods: {
    changeParentMessage () {
      this.parentMessage = 'Hello Uni-App!'
    }
  }
}
</script>

现在，我们可以在父组件中使用changeParentMessage方法来改变parentMessage的值，并且该值会传递给子组件中的message数据，从而动态更新子组件中的内容。

需要注意的是，使用v-bind指令时，属性名需要使用v-bind:attr或者:attr的简写方式来绑定。其中，attr为要绑定的属性名，例如:message表示绑定子组件中的message属性。