1.父給子傳值 屬性 props:['屬性']
2.子給父?jìng)?用事件傳 $emit
子給父?jìng)鳎?/p>
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? <div id='app'>
? ? ? <my-father></my-father>
? </div>
? <script src='js/vue.js'></script>
? <script>
? ? ? Vue.component("my-father",{
? ? ? ? ? template:`
? ? ? ? ? ? <div>
? ? ? ? ? ? ? <h1>{{mess}}</h1>
? ? ? ? ? ? ? <my-child @send='rcvMsg'></my-child>
? ? ? ? ? ? </div>
? ? ? ? ? `,
? ? ? ? ? data:function(){
? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? ? mess:''
? ? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? methods:{
? ? ? ? ? ? ? rcvMsg:function(txt){
? ? ? ? ? ? ? ? ? this.mess=txt
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? })
? ? ? Vue.component('my-child',{
? ? ? ? ? template:`
? ? ? ? ? ? ? ? <button @click='sendToFather'>傳給父元素</button>
? ? ? ? ? ? `,
? ? ? ? ? data:function(){
? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? ? msg:'我是子組件中的數(shù)據(jù)场仲，要給父組件傳值'
? ? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? methods:{
? ? ? ? ? ? sendToFather:function(){
//? ? ? ? ? ? ? ? this.$emit('自定義事件名',要傳輸?shù)臄?shù)據(jù))
? ? ? ? ? ? ? ? ? this.$emit('send',this.msg)
? ? ? ? ? ? }?
? ? ? ? ? }
? ? ? })
? ? ? new Vue({
? ? ? ? ? el:"#app"
? ? ? })
? ? </script>
</body>
</html>
