<div id="app">
  <div class="p-5">
    {{`外層imgUrl的值:${imgUrl}`}}
    <photo :url="imgUrl"></photo>
  </div>
</div>
const app = Vue.createApp({
  data() {
    return {
      imgUrl: 'https://images.unsplash.com/photo-1605784401368-5af1d9d6c4dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
    };
  },
});

app.component('photo', {
  props:['url'],
  template:` 
  <img :src="url" class="img-thumbnail" alt>
  <input type="text" class="form-control" v-model="url">
  {{url}}
  `
});
app.mount('#app');
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js