标签:blog win title lang class nts com style script
举个栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../Vue.js"></script> <template id="tpl1"> <h3>我是父组件 -->{{msg}}</h3> <bbb @child-data="get"></bbb> </template> <template id="tpl2"> <input type="button" value="发送" @click="send()"> <h4>我是子组件 -->{{msg2}}</h4> </template> <script> //子组件取父组件的数据 window.onload = function () { new Vue({ el:"#div", //局部小组件 components:{ ‘aaa‘:{ data: function () { return { msg:‘我是父组件的数据‘ } }, template:‘#tpl1‘, methods: { get: function (m) { this.msg = m; } }, components:{ ‘bbb‘:{ data: function () { return { msg2: ‘我是子组件‘ } }, template:"#tpl2", methods: { send:function (){ this.$emit(‘child-data‘,this.msg2); } } } } } } }) } </script> </head> <body> <div id="div"> <aaa></aaa> </div> </body> </html>
标签:blog win title lang class nts com style script
原文地址:http://www.cnblogs.com/4thmonth/p/7163334.html