san學習筆記（二）--基礎知識

時間 2019-11-10

標籤 san 學習筆記基礎知識简体版

原文原文鏈接

本篇將介紹san的基礎知識，包括雙向綁定、父子組件通訊、動態組件通訊。更加詳細的可看官方文檔。css

雙向綁定

在san中，經過：{= value =} 實現雙向綁定。請看實例：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>雙向綁定</title>
</head>
<body>
<script src="https://unpkg.com/san@latest"></script>
<script>
var MyApp = san.defineComponent({
    template: 
        '<div>'
        +   '請輸入值: <input value="{= word =}" placeholder="請輸入">'
        +   '<h2>輸入的值: {{word}}</h2>'
        + '</div>'
        ,
    initData: function () {
        return {
            word: ''
        };
    }
});

var myApp = new MyApp();
myApp.attach(document.body);
</script>
</body>
</html>

父子組件通訊

父組件向子組件傳值

父組件經過雙向綁定，向子組件傳值；git

// 父組件中，將值綁定在子組件上
<my-card title="{{title}}"></my-card>

// 子組件中獲取
this.data.get('title')

子組件向父組件傳值

子組件經過 this.fire('change', value),向父組件傳值；父組件經過監聽事件接收。github

// 子組件中, 經過fire傳值給父組件
 this.fire("change", title)

// 父組件中，監聽change事件
<my-card on-change="getTitle"></my-card>

// 事件監聽, 接收子組件的值
getTitle:function(value){
    var newWord = value
    this.data.set("word", newWord)
}

詳情請看完整例子：數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父子組件通訊</title>
    <link rel="stylesheet" href="./static/style.css">
</head>
<body>
<script src="https://unpkg.com/san@latest"></script>
<script>

var Child = san.defineComponent({
    template: 
         '<div class="card">'
        +       '<p class="card-title">{{title}}</p>'
        +       '<p class="card-content">{{content}}</p>'
        +       '<button class="card-btn" on-click="change">點我</button>'
        + '</div>'
        ,
    initData: function () {
        return {
            title: "child title",
            content: "child content",
        };
    },
    change:function(){
        var title = this.data.get("title") // 獲取父組件傳的值
        this.fire("change", title) // 傳值給父組件
    }
});

var Parent = san.defineComponent({
    template: 
        '<div class="parent">'
        +   '<p class="top">看這裏：{{word}}</p>'
        +   '<my-card title="{{title[0]}}" content="{{content[0]}}" on-change="getTitle"></my-card>'
        +   '<my-card title="{{title[1]}}" content="{{content[1]}}" on-change="getTitle"></my-card>'
        + '</div>'
        ,
    components: {
        'my-card': Child
    },
    initData: function () {
        return {
            word:"demo of san",
            title:[],
            content:[]
        };
    },
    attached:function(){
        let _this = this      
        setTimeout(function(){
            _this.data.push("title", 'san') // 數組須要使用push，視圖纔會變化
            _this.data.push("title", 'yongchaoo')
            _this.data.push("content", 'js frame')
            _this.data.push("content", 'loving coding')
        }, 3000)
    },
    // 事件監聽, 接收子組件的值
    getTitle:function(value){
        var newWord = value
        this.data.set("word", newWord)
    }
});

var Parent = new Parent();
Parent.attach(document.body);
</script>
</body>
</html>