vue的props实现父组件变化子组件一起变化
生活随笔
收集整理的這篇文章主要介紹了
vue的props实现父组件变化子组件一起变化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
類似于用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 綁定動態 Props 到父組件的數據。每當父組件的數據變化時，也會傳導給子組件：
<div><input v-model="parentMsg"><br><child v-bind:my-message="parentMsg"></child></div>使用 v-bind 的縮寫語法通常更簡單：
<child :my-message="parentMsg"></child>實例：
<!DOCTYPE html><html lang="en"><head><script type="text/javascript" src="vue.js"></script><meta charset="UTF-8"><title>vue的props實現父組件變化子組件一起變化</title></head><body><div id="app1"><input v-model="messsage" > <!--input綁定實例中data中的message--><div ><child v-bind:my-message="messsage"></child> <!--子組件綁定實例中data中的message--></div></div><script>Vue.config.debug = true;Vue.component('child',{props: ['myMessage'], //VUE實例中myMessage 等價于my-messagetemplate: '<span>{{ myMessage }}</span><br>'});var vm = new Vue({el: '#app1',data:{messsage:'hello you are a good boy!'}});</script></body></html>總結
以上是生活随笔為你收集整理的vue的props实现父组件变化子组件一起变化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阿里云盘打不开(Edge浏览器阿里云盘打
- 下一篇： 如何制作Vuejs组件，并且在项目中使用