前言：vue 實現父組件給子組件傳值，然后子組件可以修改回父組件的值。vue 的 prop 默認是單向數據綁定，但是偶爾需要雙向綁定，這時就需要知道如何才能讓子組件的數據修改時影響到父組件的數據。轉載請注明出處：https://www.cnblogs.com/yuxiaole/p/9304449.html
網站地址：我的個人vue+element ui demo網站
github地址：yuleGH github (喜歡記得star哦)
prop 默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強制雙向或單次綁定。
要點：
-
在子組件的 data 中創建一個props屬性的副本
-
watch props 中的屬性 目的是為了同步父組件對 props 的修改
-
watch 屬性副本，emit一個函數通知到組件外，目的是為了同步子組件對屬性的修改。這時利用了.sync，所以可以使用 this.$emit("update:name", newVal); 這種形式。
直接上 Demo：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <html> <head> <title>測試</title> </head> <body> <div id="app"> <input id="val1" v-model="value1"> <button @click="clickBtn">點擊打印</button> <component-input :name.sync="value1"></component-input> </div> <!-- 引入組件庫 --> <script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script> <script type="text/javascript"> var componentInput = { template : "<div>子組件<input v-model='curName'></div>", data : function(){ return { curName : this.name } }, props : ['name'], watch : { 'name' : function(newVal, oldVal){ this.curName = newVal; }, curName : function(newVal, oldVal){ this.$emit("update:name", newVal); } } }; new Vue({ el: "#app", data: { value1: "" }, components : { 'component-input' : componentInput }, methods: { clickBtn: function () { console.log(this.value1); } } }); </script> </body> </html>
轉載請注明出處：https://www.cnblogs.com/yuxiaole/p/9304449.html