一、父组件向子组件传值
首先父组件发送的形式是用bind绑定值到子组件身上,然后子组件数props属性接收
<body> <div id="app"> <!-- 父组件,可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 --> <com1 :parentmsg="msg"></com1> </div> </body> </html> <script> var vm = new Vue({ el: "#app", data: { msg: "这是父组件中的数据" }, methods: {}, components: { com1: { data() { // return { // title: "123", // content: "qqq" // } }, template: '<h1 @click="change">这是子组件 --- {{parentmsg}}</h1>', props: ['parentmsg'], // directives: {}, // filters: {}, // components: {}, // methods: { // change() { // this.parentmsg = "被修改了" // } // } } } }) </script>
二、子组件向父组件传值
<body> <div id="app"> <com2 @func="show"></com2> </div> </body> <template id="tmpl"> <h1>这是子组件</h1> <h4>点击按钮获取从父组件传过来的 func 方法</h4> <input type="button" value="点击" @click="myclick"> </template> </html> <script> var com2 = { template: '#tmpl', methods: { myclick() { this.$emit('func', this.sonmsg) } } } var vm = new Vue({ el: "#app", data: { datamsgFormSon: null }, methods: { show(data) { this.datamsgFormSon = data } }, components: { com2: com2 } }) </script>
三、非父子之间传值
<body> <div id="app"> <zs></zs> <ls></ls> </div> </body> </html> <script> var bus = new Vue(); Vue.component("zs", { template: '<div>这是张山<button @click="sb">传值</button></div>', methods: { sb() { bus.$emit("tt", { name: "我是zs" }); } } }); Vue.component("ls", { template: "<div>我是ls</div>", created() { bus.$on("tt", function(data) { console.log(data); }); } }); </script>